• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Кнопка с анимацией капли воды на HTML/CSS (Красивая анимация для оригинальной кнопки с каплей воды)
Кнопка с анимацией капли воды на HTML/CSS
Kosten
Дата: Пятница, 2021-02-05, 20:45 | Сообщение 1
Оффлайн
Администраторы
Сообщений:38253
Награды: 65


Вероятно вас заголовок удивил, что эта кнопки идет с красивой анимацией с каплей воды, и это правда. Так как она смотрится просто потрясающий, где мы изначально видим ключевое слово, что по сторонам идет небольшая тень для каркаса.

Но стоит навести, как над знаками появляется капля воды, где падает под место, где должно было подчеркивание и расплывается в лужу, что и будет заменять вид подчеркивание кнопки.

По умолчанию:



При наведении:



Установка:

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.

Демонстрация
Прикрепления: 3675478.png(8.0 Kb) · 8797021.png(5.5 Kb) · dripdrop-css.zip(3.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Кнопка с анимацией капли воды на HTML/CSS (Красивая анимация для оригинальной кнопки с каплей воды)
  • Страница 1 из 1
  • 1
Поиск: