главная/Анимация подчеркивания на чистом CSS
Анимация подчеркивания текста

Анимация подчеркивания на чистом CSS

Простой CSS сниппет для осуществления анимации подчеркивания текста при наведении мыши. Такой hover эффект часто используется для элементов навигации и различных кнопок.

<button class="underline-me">Underline Me</button>

.underline-me {
  background-image: linear-gradient(
    transparent 0%,
    transparent 90%,
    hotpink 90%,
    hotpink 100%
  );
  
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position-x: right;
  transition: background-size 300ms;
  border: none;
  background-color: #180f0f;
  color: white;
  padding: 15px;
  display: flex;
  cursor: pointer;
  border-radius: 5px;
}

.underline-me:hover {
  background-size: 100% 100%;
  background-position-x: left;
}