Если брать элементы с градиентом, то они всегда красиво и элегантно смотрятся, где можно отлично настроить под любой формат. Здесь будем создавать кнопку, которая идет на градиентах, плюс к ней закреплены эффекты при наведение клика. Это простая кнопка, так как не стану добавлять оформление, здесь сами можете сделать, это выставить обводы или прописать тени, чтоб смотрелось оригинально.
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;
}
На этом все, как видите не чего сложного нет, где можно выстроить палитру цвета под разнообразные интернет порталы, в плане дизайна.
Демонстрация
