Давайте рассмотрим, как можно просто создать красивую кнопку с привлечение градиента. Вообщем в стилистике преминем несколько оттенков цвета, что будет красиво переходит с одной гаммы цвета в другую. Что можно сделать как для темного формата, так и для светлого, где уже сами выставите тот оттенок, который больше вам понравится или подойдет к основному дизайн.
Так получилось:
Приступаем к установке:
HTML
Код
<a href="http://zornet.ru" class="tainbo-kolas">
<span>Zornet.Ru</span>
</a>
CSS
Код
.tainbo-kolas {
background-image: linear-gradient(90deg, #21bff3 0%, #f7cd1b 49%, #f51616 100%);
position: relative;
padding: 3px;
display: inline-block;
border-radius: 7px;
}
span {
display: inline-block;
background: #191919;
color: white;
text-transform: uppercase;
padding: 1.5rem 4rem;
border-radius: 3px;
font-weight: 800;
font-size: 3rem;
}
В мануале показано, как можно использовать градиент. так, чтоб корректно отображался на всех браузерах, при создании набора разнообразных по палитре градиентов для кнопки.
Демонстрация
