Это яркая по своему оттенку цвета анимационная кнопка, где вместо оттенка мы в стилях пропишем изображение, которое увеличится, что при наведение будет выдавать красивый вид. Такой стиль отлично смотрится на аналогичной палитре, а также можно видеть на темном фоне. Где изначально она идет мрачная, но только стоит навести клик, как она начинается светиться, что безусловно красиво и оригинально смориться.
Если по умолчанию:
Такой вид с наведением клика:
HTML
Код
<button class="kawebsita-bemeanus"></button>
CSS
Код
.kawebsita-bemeanus {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
button, button:before {
display: flex;
align-items: center;
justify-content: center;
}
button {
width: 150px;
height: 50px;
cursor: pointer;
font-family: 'Play', sans-serif;
font-size: 20px;
color: white;
border: none;
border-radius: 25px;
background-image: url("https://assets.codepen.io/3305358/hazard-stripes-wallpaper.jpg");
background-size: 150%;
background-position: left;
transition: 1s;
}
button:before {
width: 150px;
height: 50px;
content: 'ZorNet.Ru';
background: rgba(0,0,0,0.6);
border-radius: 25px;
position: absolute;
transition: 500ms;
}
button:hover:before {
background: rgba(0,0,0,0);
text-shadow: 1px 1px 1px black;
}
button:hover {
background-position: center;
box-shadow: 0px 0px 10px rgba(232, 218, 26, 0.5);
}
button:focus {
outline: none;
}
На этом все, также изображение можно взять в прикрепленном архиве.
Демонстрация
Скачать
