Назар Токар
Опубліковано: 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 Будьте в курсі. Долучайтесь до нашого каналу в Telegram.

    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    23 коментаря

    спочатку нові
    за рейтингом спочатку нові за хронологією

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

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

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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

    Автор
    Назар Токар

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

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

    И фотошоп не нужен :)

    Автор
    Назар Токар

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

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

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

    Стилиандр

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

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

    Автор
    Назар Токар

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

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