24 Квітень 2013
40 459
Рубрика: уроки

Как сделать красивую кнопку на CSS+HTML без изображений

Как сделать кнопку с градиентом на CSS3 без графики на одном html.

Помните урок Как удвоить продажи магазина при помощи одной кнопки? Там я рассказывал, как сделать крутую кнопку, а сама кнопка формировалась из собственно объекта button и слоя без фонового цвета с ободком толщиной в 1 пиксель.

Я решил упростить структуру и убрать лишний слой. Сегодня представляю небольшой урок, как сделать красивую кнопку с градиентом на CSS3 без использования графики, на одном только html.

Более того, это будет работать без вмешательства в код страницы, достаточно будет прописать соответствующие классы в CSS. А при правильном подходе этот стиль можно применить ко всем кнопкам сайта даже без класса с помощью конструкции типа:

input[type*='button'], input[type*='submit']

Кнопка будет выглядеть так:

great-button
…и она на 146% лучше кнопки добавления в корзину на Amazon.com, информация из достоверных источников :).

Как сделать?

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

Когда цвета выбраны, добавляем в ваш CSS такой код:

.great_btn {
 background: linear-gradient(to bottom, #0bc408 0%,#09a206 100%);
 color: #fff;
 font-size: 16px;
 text-shadow: 0 1px 0 #757575;
 padding: 4px 0 5px 0;
 margin: 0;
 cursor: pointer;
 border: 0;
 border-top: 1px solid #87c286;
 border-right: 1px solid #0e780c;
 border-left: 1px solid #0e780c;
 border-bottom: 1px solid #0e780c;
 box-shadow: 0 -1px 0 #0e780c, 0 1px 0 #fff;
 width: 150px;
 border-radius: 2px;
}

В html страниц в коде кнопки нужно добавить

class='great_btn'

Цвета для градиента, как несложно догадаться, указываются во второй строке. Включайте фантазию и экспериментируйте с цветовой гаммой и направлением градиента. Если стандартный градиент вас не устроит, топайте в редактор градиента на Colorzilla и создавайте свой стиль для кнопки.

Поддержка CSS3 в Internet Explorer 9+

Как вы знаете, браузер Internet Explorer в ссоре не только со здравым смыслом, но и с CSS3. Потому, чтобы всё работало в IE9, перед <html> добавляйте строку:

< !DOCTYPE html>

Тем самым вы показываете браузеру, что параметры CSS3 нужно обрабатывать. Как ни странно, если этого не указывать, явные стили для объектов этой в версией браузера отображаются как в IE8-, то есть никак.

Успехов в работе!

Тепер я хочу бачити коментарі 23