Вероятно вас заголовок удивил, что эта кнопки идет с красивой анимацией с каплей воды, и это правда. Так как она смотрится просто потрясающий, где мы изначально видим ключевое слово, что по сторонам идет небольшая тень для каркаса.
Но стоит навести, как над знаками появляется капля воды, где падает под место, где должно было подчеркивание и расплывается в лужу, что и будет заменять вид подчеркивание кнопки.
По умолчанию:
При наведении:
Установка:
HTML
Код
<button class="dsamion-kedasum">ZorNet.Ru</button>
CSS
Код
.dsamion-kedasum {
-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: 112px;
height: 52px;
background: rgb(234 234 234 / 20%);
border: none;
border-radius: 25px;
box-shadow: 1px 1px 5px rgb(0 0 0 / 31%);
color: #5d5b5b;
cursor: pointer;
display: flex;
font-weight: bold;
align-items: center;
justify-content: center;
transition: 1s;
}
button:before {
content: '';
position: absolute;
background-color: #4d8ae0;
background-image: linear-gradient(
315deg
, #7eaef3 0%, #60e4ec 74%);
width: 0px;
height: 0px;
border-radius: 50%;
transform: translateY(3px);
}
button:hover:before {
animation: animate 1s forwards;
}
button:hover {
font-size: 16px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.0);
}
button:focus {
outline: none;
}
@keyframes animate {
10%, 20% {transform: translateY(-20px);
height: 15px;
width: 10px;}
50% {transform: translateY(15px);}
100% {transform: translateY(15px);width: 50px; height: 5px;}
}
Все выполнено при чистой стилистике CSS.
Демонстрация
