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

    Уведомлять
    avatar
    5000
    юлька
    Гость

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

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

    Анна
    Гость

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

    Алексей
    Гость

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

    Алексей
    Гость

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

    Amor
    Гость

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

    Андрюха
    Гость

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

    Андрюха
    Гость

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

    Agbur
    Гость

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

    Agbur
    Гость

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

    Артем
    Гость

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

    Стилиандр
    Гость

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

    Savio
    Гость

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

    Вадим
    Гость

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

    wpDiscuz