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


Если вам нужна кнопка на темном градиенте, где каждый оттенок дополняет стилистику дизайна. То это кнопка просто великолепна, как для светлого или темного формата. Плюс еще имеет красивую анимацию, которая появляется при наведение курсора.



HTML

Код
<button class="vanud-sakopsa"></button>

CSS

Код
.vanud-sakopsa {
  -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;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #923cb5;
background-image: linear-gradient(147deg, #923cb5 0%, #000000 74%);
    border: none;
    transition: 500ms;
}

button:before {
    content: 'ZORNET.RU';
    width: 140px;
    height: 40px;
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    position: absolute;
    transition: 500ms;
}

button:hover:before {
    width: 100px;
    height: 25px;
    border-radius: 10px;
    background: rgba(255,255,255,0);
}

button:hover {
    height: 55px;
    width: 155px;
}

button:focus {
    outline: none;
}

Установка завершена.

Демонстрация
Прикрепления: 0943972.png(40.1 Kb) · deep-purple.zip(2.8 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Анимационная CSS кнопка с темный градиентом (Красивая кнопка с анимацией и красивым эффектом)
  • Страница 1 из 1
  • 1
Поиск: