• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Кнопки с эффектом растяжение при наведении (Кнопки с оригинальными границами при использование HTML, CSS)
Кнопки с эффектом растяжение при наведении
Kosten
Дата: Среда, 2021-04-14, 12:38 | Сообщение 1
Оффлайн
Администраторы
Сообщений:38989
Награды: 65
Эти кнопки по своему дизайну выглядят как стандартные, где при наведение появляется цветовая гамма. Но только не здесь, ведь они растягиваются, где одновременно появляется знаки, что будут перед ключевыми словами.



HTML

Код
<button class="vedmolas-kugsan">BOOK<span> >>></span></button>
<button class="vedmolas-kugsan">MORE INFO<span> >>></span></button>

CSS

Код
button {
  font-family: 'Play', sans-serif;
  font-size: 16px;
  background: transparent;
  border: 2px solid #eee;
  width: 150px;     
  height: 50px;
  border-radius: 5px;
  color: #eee;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: 400ms ease-in-out;
  margin: 0 10px 0 10px;
}

.vedmolas-kugsan {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

button:hover {
  width: 170px;
  background: #777;
  border: 2px solid #777;
  margin: 0;
}

button:focus {
  border: none;
}

button span {
  color: transparent;
  transition: 500ms;
  margin-left: -20px;
}

button:hover span{
  color: #eee;
  margin-left: 0;
}

Демонстрация
Прикрепления: 9821801.png(12.2 Kb) · border-buttons.zip(3.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Кнопки с эффектом растяжение при наведении (Кнопки с оригинальными границами при использование HTML, CSS)
  • Страница 1 из 1
  • 1
Поиск: