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

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

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

CSS

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

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