Здесь видим кнопку, где при наведении кнопка идет в наклоне, что сильно отличается от стандартных эффектов. Также автоматически происходит тестовой эффект, где светлая гамма отходит от тени.
HTML
Код
<button class="gsamo-kulas vedemudsa"><span>
ZORNET.RU</span></button>
CSS
Код
.vedemudsa {
-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;
}
.gsamo-kulas {
width: 150px;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: #e22b75;
background-image: linear-gradient(
315deg
, #e42773 0%, #f55d4d 74%);
border: 1px solid #496077;
color: #f5f0f0;
transform: rotateX(
30deg
);
box-shadow: inset 0 15px 10px rgb(16 16 16 / 10%);
transition: 1s;
}
.gsamo-kulas span {
transform: translateY(-5px);
text-shadow: 0 15px 3px rgba(0,0,0,0.4);
transition: 1s;
}
.gsamo-kulas:hover {
color: #eee;
box-shadow: inset 0 -15px 10px rgba(0,0,0,0.1);
transform: rotateX(-30deg);
}
.gsamo-kulas:hover span {
transform: translateY(5px);
text-shadow: 0 -15px 3px rgba(0,0,0,0.4);
}
button:focus {
outline: none;
}
Такой стиль цвета отлично смотреться на темном или светлом формате сайта.
Демонстрация