Назар Токар
Опубліковано: 24 Квітня 2013
Оновлено: 5 Травня 2017

Помните урок Как удвоить продажи магазина при помощи одной кнопки? Там я рассказывал, как сделать крутую кнопку, а сама кнопка формировалась из собственно объекта 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. Програміст, адміністратор української Вікіпедії.
← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket
Обговорення

  1. юлька

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

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

  2. Анна

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

  3. Алексей

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

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

    2. Алексей

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

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

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

  5. Андрюха

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

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

    2. Андрюха

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

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

  6. Agbur

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

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

    2. Agbur

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

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

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

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

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

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

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

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

  11. Стилиандр

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

  12. Savio

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

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

  13. Вадим

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