• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Кнопка Вверх в виде ракеты на HTML + CSS (Кнопка Вверх - взлетающая ракета при наведении клика)
Кнопка Вверх в виде ракеты на HTML + CSS
Kosten
Пятница, 19 Февраля 2021 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Интересное решение для функции поднятие страницы, как кнопка вверх, которая при наведении меняется по своему дизайну, где мы видим изначально стандартную кнопку, но с наведение получается ракета, что смотрится просто великолепно.

При открытие:



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



Установка:

HTML


CSS

Код
.samilas-depunas {
  -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;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 35px;
    transition: 500ms;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 10px;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

button svg {
    fill: white;
    transition: 500ms;
}

button:hover span, button:focus span {
    display: none;
}

button:hover {
  animation: shake 100ms linear infinite;
    justify-content: center;
}

button:hover svg, button:focus svg {
    width: 40px;
    height: 40px;
}

button:focus {
    outline: none;
    justify-content: center;
    animation: blast 1s linear forwards;
}

button:hover, button:focus {
    background: transparent;
    border: none;
}

@keyframes shake {
    0%{transform: translateX(0)}
    100%{transform: translateX(-2px)}
}

@keyframes blast {
    0%{transform: translateY(0)}
    100%{transform: translateY(-60vh)}
}

Как понимаете, здесь представлена кнопка с красивой анимацией, что можно самостоятельно вписать в то место, гдн хотите ее видеть.

Демонстрация
Прикрепления: 9435581.png (11.9 Kb) · 4143342.png (7.8 Kb) · rocket-send.zip (3.8 Kb)
Страна: (RU)
SsmouZ
Пятница, 19 Февраля 2021 | Сообщение 2
Оффлайн
Пользователи
Сообщений:2
Награды: 0
47a Хорошо смотрится, спасибо

Обычной подписи нет.
Страна: (UA)
Форум » Веб-разработка » HTML + CSS — коды » Кнопка Вверх в виде ракеты на HTML + CSS (Кнопка Вверх - взлетающая ракета при наведении клика)
  • Страница 1 из 1
  • 1
Поиск: