ZorNet.Ru — сайт для вебмастера » HTML и CSS » Растягивающаяся кнопка на HTML + CSS

Растягивающаяся кнопка на HTML + CSS

Растягивающаяся кнопка на HTML + CSS
Простой эффект для кнопки с эффектом с помощью CSS, который понравился простотой и своим трюком, где при привидение клика, каркас растягивается. Это еще один минимальный и чистый способ добавить еще один аспект на креативность на вашем сайте. Как вы можете догадаться по названию, оно использует эффект растяжения или растяжения при наведении курсора.

Есть две анимированные строки вверх и вниз текстового раздела, где все разделы также расширяются в определенном масштабе, чтобы соответствовать растянутому эффекту. Размер шрифта, цвета и стиль также могут быть легко настроены с помощью CSS. Все сделано просто и удобно, где поставлено под класс, что можно вывести отдельно по функций.

При открытие страницы или сайта:

Кнопка с красивым эффектом при наведение клика

Здесь уже видим эффект растягивание знаков, что наведен курсор на кнопку:

Красивый эффект кнопки на чистом CSS

Приступаем:

HTML

Код
<div class="anksacom-plments">
  <a href="#">Скачать</a>
</div>

CSS

Код
.anksacom-plments{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.anksacom-plments {
  display: block;
  font-size: 22px;
  font-family: sans-serif;
  text-decoration: none;
  color: #1d1a1a;
  border-top: 2px solid #2d2929;
  border-bottom: 2px solid #272525;
  padding: 8px;
  letter-spacing: 2px;
  transition: all .30s;
}

.anksacom-plments a {
  text-decoration: none;
  color: #292525;
}

.anksacom-plments:hover{
  letter-spacing: 12px;
}

На счет эффект hover, это когда наводим клик, то происходит изменение. То там установлено значение 12 пикселей, можно больше или меньше, все как вам нужно.

Также вы можете выставить оттенок цвета, чтоб при растягивание еще и менялась палитра цвета, это просто как вариант, который пригодится для оформление.

Демонстрация
12 Июня 2019 Загрузок: 1 Просмотров: 1976 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar