• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как создать кнопку с эффектом градиента (Создание кнопки средствами градиента на CSS)
Как создать кнопку с эффектом градиента
Kosten
Дата: Вторник, 2019-04-23, 03:01 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24591
Награды: 57


Если брать элементы с градиентом, то они всегда красиво и элегантно смотрятся, где можно отлично настроить под любой формат. Здесь будем создавать кнопку, которая идет на градиентах, плюс к ней закреплены эффекты при наведение клика. Это простая кнопка, так как не стану добавлять оформление, здесь сами можете сделать, это выставить обводы или прописать тени, чтоб смотрелось оригинально.



HTML

Код
<a href="#" class="akonamus-kedanga">ZORNET.RU</a>

CSS

Код
.akonamus-kedanga {
    display: inline-block;
    color: #5a5555;
    font-size: 13px;
    line-height: 18px;
    font-weight: bold;
    padding: 9px 27px;
    border-radius: 58px;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0);
    background: linear-gradient(#fdf8f8,#fbf4f4) padding-box, linear-gradient(to top, rgb(18, 201, 228) 0%, rgb(54, 142, 206) 80%, rgb(52, 123, 216) 100%) border-box;
    transition: all .2s ease-in-out;
}

.akonamus-kedanga:hover {
    background: linear-gradient(to top, rgb(14, 206, 234) 0%, rgb(57, 136, 193) 80%, rgb(46, 120, 216) 100%);
    color: #f7f1f1;
}

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

Демонстрация
Прикрепления: 5702776.jpg(6.7 Kb) · css.zip(1.7 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как создать кнопку с эффектом градиента (Создание кнопки средствами градиента на CSS)
  • Страница 1 из 1
  • 1
Поиск: