Сейчас трудно кого удивить стильной кнопкой для сайтов, но все же попадаются реально красиво созданные кнопки, которые имеют отличный hover эффект, но главное в дизайне прописано несколько оттенков цвета. И это безусловно градиент, который из одного оттенка вливается следующий, делая оригинальную палитру цвета.
Но здесь при наведение мы еще увидеть не просто смену палитры, а тень, которая и будет состоять из той цветовой палитры, что изначально задали основе.
HTML
Код
<button class="dsamip-odunas">ZORNET.RU</button>
CSS
Код
.dsamip-odunas {
-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: 162px;
height: 48px;
cursor: pointer;
border: none;
color: #fdfafa;
background-color: #17b6da;
background-image: linear-gradient(315deg, #0fc6ef 0%, #c856ff 74%);
transition: 500ms;
position: relative;
}
button:before, button:after {
z-index: -1;
content: '';
position: absolute;
width: 75px;
height: 0px;
background: transparent;
transition: 500ms;
}
button:before {
transform: translateX(-50px) translateY(27px);
box-shadow: 5px 5px 16px #ca61ff;
}
button:after {
transform: translateX(-25px) translateY(27px);
box-shadow: -5px 5px 16px #1fd1f9;
}
button:hover:before, button:hover:after {
height: 5px;
}
button:hover {
box-shadow: inset 0px 5px 10px rgba(255,255,255,0.4);
}
button:focus {
outline: none;
}
На этом все!
Демонстрация
