Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Как сделать кнопку с градиентной заливкой?

Дата:24.01.16 в 12:58
Раздел: 

Из этой статьи Вам станет известно, как оформить кнопку с градиентной расцветкой.

Как сделать кнопку с градиентной заливкой

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

На самом деле ничего сложного в этом нет. Чтобы наша кнопка была с градиентом во всех браузерах, вставим ей фон с помощью картинки. Создаем картинку шириной 1 пиксель, а высота ее должна быть равна высоте кнопки. После этого к нам на помощь приходит свойство background. В нем мы указываем путь к картинке, а также значение repeat-x, чтобы градиент растягивался в зависимости от содержимого кнопки, то есть ее ширины. На практике это будет выглядеть вот так.

CSS

.gradient {
    background: url(grad.jpg) repeat-x; 
   }

Прогоняем наш код через браузер

пример отображения кнопки с градиентом

Для справки

Как вы заметили из картинки, кнопка с градиентом отличается от стандартного представления кнопки браузером. Это особенность применения свойства background, которое отменяет действия стилей по умолчанию у браузера.

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)