Помните урок Как удвоить продажи магазина при помощи одной кнопки? Там я рассказывал, как сделать крутую кнопку, а сама кнопка формировалась из собственно объекта button и слоя без фонового цвета с ободком толщиной в 1 пиксель.
Я решил упростить структуру и убрать лишний слой. Сегодня представляю небольшой урок, как сделать красивую кнопку с градиентом на CSS3 без использования графики, на одном только html.
Более того, это будет работать без вмешательства в код страницы, достаточно будет прописать соответствующие классы в CSS. А при правильном подходе этот стиль можно применить ко всем кнопкам сайта даже без класса с помощью конструкции типа:
input[type*='button'], input[type*='submit']
Кнопка будет выглядеть так:
…и она на 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-, то есть никак.
Успехов в работе!
В 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, там уже все сделано, осталось только юзать
Дык юзайте :). И у вас будет точно такая же кнопка, как на десятках тысяч сайтов. Зато чуть проще в работе, таки да.
Спасибо, как раз думал о нечто подобном!