Помните урок Как удвоить продажи магазина при помощи одной кнопки? Там я рассказывал, как сделать крутую кнопку, а сама кнопка формировалась из собственно объекта 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-, то есть никак.

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

↑ Тисни «Лайк», щоб читати нас у Фейсбуці

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Коменти
юлька

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

class=’great_btn’ это где? объясните тупому. я вообще не понимаю, как в этом коде что-либо поменять или добавить(((

Анна

красавчик, все просто и ясно, работает! автор респкт тебе

Алексей

Автор еще отвечает на вопросы?

Назар Токарь

@Алексей, да.

Алексей

@Назар Токарь, Тогда возможно сможете подсказать, возможно ли сделать такую кнопку в joomla, через кнопку вставить код? просто на большее мозгов не хватает. Сайт изначально делался не мной, но хотелось бы чутка изменить.

Назар Токарь

@Алексей, я не работаю с джумлой, не знаю.

Amor

Автор, спасибо. Именно то, что надо.
На сайте смотрится замечательно)

Андрюха

Вот придрались, для вас урок какой никакой написан был! и к тому же он ясно расписан что к чему! Особенно убило bootstrap – так возьми да скачай шаблон полностью весь и тогда даже bootstrap не потребуется – странные люди пошли..

Назар Токарь

@Андрюха, еще забыл в апреле упомянуть, что вместо нескольких строчек кода придется ставить библиотеку на сотню килобайт.

Андрюха

@Назар Токарь, ТОчно! Меня с ним давно познакомили с Bootstrap-ом, я вникал в него, когда понял – удалил файлы и больше к нему не возвращался. Свой код – лучше.

Назар Токарь

@Андрюха, бутстрап хорош для стандартизированной верстки или когда не хочется ничего верстать вообще. Поставил и забыл. Например, pr-cy.ru сделан визуально из Bootstrap-элементов и не могу сказать, что получилось плохо :)

Agbur

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

Назар Токарь

@Agbur, простите, ЧТО?

Agbur

@Назар Токарь, Ссылка внутри кнопки выглядит как обыкновенная ссылка , а у вас она белая. Если можете мне помогите я вас отблагодарю ICQ 437-488

Назар Токарь

@Agbur, потому что у меня это не ссылка, а текст кнопки. Я не пользуюсь icq, если есть вопросы пишите на почту, она внизу сайта указана.

Артем

Ой-ей, сорри :)

Дедушка

Артём, посмотри 4-й абзац снизу :)

Артем

А есть же вот такая штука: http://www.colorzilla.com/gradient-editor/
И фотошоп не нужен :)

Дедушка

Стилиандр, ёпты, из Украины ты не решался, а из Евросоюза начал комментить. Вендорные как бы да, нужны, но я допускаю, что стандартное указание стилей сработает.

Что не так со стандартной шириной элемента? Ну ок, у кнопки фиксированная ширина. Значит, не изменится при смене value. Кто не хочет, ширину убирает. Подчеркивания-тире это важно?

Про бордюры согласен, надо поправить.

Стилиандр

Ну это же пиздец! Жесткая ширина у инлайн элемента, несемантичный инпут, отсутствие вендорных префиксов
Ну и по мелочи селекторы можно разделять подчеркиванием но в тру верстке всетаки приняты тире, и блок с бордюрами из 4х строчек можно было бы сделать двумя

Savio

откройте для себя bootstrap, там уже все сделано, осталось только юзать

Дедушка

Дык юзайте :). И у вас будет точно такая же кнопка, как на десятках тысяч сайтов. Зато чуть проще в работе, таки да.

Вадим

Спасибо, как раз думал о нечто подобном!