• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Анимация CSS границы кнопки при наведении (Красивый CSS: Hover - эффекты при наведении для кнопки)
Анимация CSS границы кнопки при наведении
Kosten
Дата: Понедельник, 2019-04-01, 21:11 | Сообщение 1
Администраторы
Сообщений:20795
Награды: 56


Создаем необычную кнопку, где будет анимация границ, как сверху, так снизу кнопки, что при наведение на нее они покажутся. Где после этого появится красивая анимация для кнопки, где можно поставить на любой тематический сайт, ведь она полностью создана на чистом CSS. А это означает, вы как веб разработчик можете поставить ту палитру цвета, которую посчитаете нужным видеть на своем сайте.



HTML

Код
<div class="klass"><button class="kopalasten">ZORNET.RU</button></div>

CSS

Код
.kopalasten {
    background-color: #ab602a;
    border: none;
    color: #efe9e9;
    outline: none;
    padding: 15px 40px 9px;
    position: relative;
  cursor:pointer;
}
.kopalasten:before,
.kopalasten:after {
  border: 0 solid transparent;
  transition: all 0.25s;
  content: '';
  height: 24px;
  position: absolute;
  width: 24px;
}
.kopalasten:before {
  border-top: 2px solid #b56429;
  left: 0px;
  top: -5px;
}
.kopalasten:after {
  border-bottom: 2px solid #b56429;
  bottom: -5px;
  right: 0px;
}
.kopalasten:hover {
  background-color: #b56429;
}
.kopalasten:hover:before,
.kopalasten:hover:after {
  height: 100%;
  width: 100%;
}


Используйте :beforeи :after псевдоэлементы в качестве границ, которые делают анимацию при наведении.

Демонстрация
Прикрепления: 1237076.png(1.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Анимация CSS границы кнопки при наведении (Красивый CSS: Hover - эффекты при наведении для кнопки)
  • Страница 1 из 1
  • 1
Поиск: