• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты HTML для сайта » Красивая CSS кнопка с помощью градиента (Как делаются в css3 красивые кнопки с помощью градиента)
Красивая CSS кнопка с помощью градиента
Kosten
Дата: Четверг, 2020-07-23, 05:31 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29297
Награды: 62


Сейчас трудно кого удивить стильной кнопкой для сайтов, но все же попадаются реально красиво созданные кнопки, которые имеют отличный hover эффект, но главное в дизайне прописано несколько оттенков цвета. И это безусловно градиент, который из одного оттенка вливается следующий, делая оригинальную палитру цвета.

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



HTML

Код
<button class="dsamip-odunas">ZORNET.RU</button>

CSS

Код
.dsamip-odunas {
  -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: 162px;
    height: 48px;
    cursor: pointer;
    border: none;
    color: #fdfafa;
    background-color: #17b6da;
    background-image: linear-gradient(315deg, #0fc6ef 0%, #c856ff 74%);
    transition: 500ms;
    position: relative;
}

button:before, button:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 75px;
    height: 0px;
    background: transparent;
    transition: 500ms;
}

button:before {
    transform: translateX(-50px) translateY(27px);
  box-shadow: 5px 5px 16px #ca61ff;
}

button:after {
    transform: translateX(-25px) translateY(27px);
    box-shadow: -5px 5px 16px #1fd1f9;
}

button:hover:before, button:hover:after {
    height: 5px;
}

button:hover {
    box-shadow: inset 0px 5px 10px rgba(255,255,255,0.4);
}

button:focus {
    outline: none;
}

На этом все!

Демонстрация
Прикрепления: 2457937.png(20.3 Kb) · glowing-css3.zip(2.9 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты HTML для сайта » Красивая CSS кнопка с помощью градиента (Как делаются в css3 красивые кнопки с помощью градиента)
  • Страница 1 из 1
  • 1
Поиск: