Если вам нужна кнопка на темном градиенте, где каждый оттенок дополняет стилистику дизайна. То это кнопка просто великолепна, как для светлого или темного формата. Плюс еще имеет красивую анимацию, которая появляется при наведение курсора.
HTML
Код
<button class="vanud-sakopsa"></button>
CSS
Код
.vanud-sakopsa {
-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 {
width: 150px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: #923cb5;
background-image: linear-gradient(147deg, #923cb5 0%, #000000 74%);
border: none;
transition: 500ms;
}
button:before {
content: 'ZORNET.RU';
width: 140px;
height: 40px;
color: rgba(255,255,255,0.7);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: rgba(255,255,255,0.1);
position: absolute;
transition: 500ms;
}
button:hover:before {
width: 100px;
height: 25px;
border-radius: 10px;
background: rgba(255,255,255,0);
}
button:hover {
height: 55px;
width: 155px;
}
button:focus {
outline: none;
}
Установка завершена.
Демонстрация
