• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Кнопка с простым эффектом при наведении (Как сделать этот эффект при наведении на кнопку)
Кнопка с простым эффектом при наведении
Kosten
Дата: Воскресенье, 2019-06-02, 17:28 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25247
Награды: 58


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

1.



2.



HTML

Код
<button>Кнопка с простым эффектом</button>

CSS

Код
button{
  background:#1AAB8A;
  color:#fff;
  border:none;
  position:relative;
  height:60px;
  font-size:1.6em;
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
button:hover{
  background:#fff;
  color:#1AAB8A;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}


Демонстрация
Прикрепления: 8940692.png(5.6 Kb) · 4122181.png(5.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Кнопка с простым эффектом при наведении (Как сделать этот эффект при наведении на кнопку)
  • Страница 1 из 1
  • 1
Поиск: