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