Блог Vaden Pro

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

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

Раздел: 

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

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

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

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

CSS

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

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

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

Для справки

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