Создаем необычную кнопку, где будет анимация границ, как сверху, так снизу кнопки, что при наведение на нее они покажутся. Где после этого появится красивая анимация для кнопки, где можно поставить на любой тематический сайт, ведь она полностью создана на чистом 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 псевдоэлементы в качестве границ, которые делают анимацию при наведении.
Демонстрация
