С появлением технологии CSS3 расширились возможности веб-дизайнеров, позволяющие в ряде случаев при создание сайта заменить использование изображений на чистый CSS-код. Так например можно поступить с кнопками, хотя раньше нам мог помочь только PhotoShop.
На днях я увидел кнопки css которые нарисовал подчерпнув идею на англоязычном блоге PremiumPixels.com
С помощью CSS3 он “нарисовал” кнопоки, кодом которых я поделюсь в данной статье.
HTML-код кнопки будет таким:
[crayon lang=’html’][/crayon]
Ниже приведены примеры кнопок. CSS-код понравившегося цвета кнопки вы можете скопировать из поля под соответствующей кнопкой.
[spoiler name=”Примеры кнопок”]
[/spoiler]
16 комментариев
У меня конечно небольшой опыт в создании сайтов, но скажите, почему вместо тега
вы используете тег
Можно использовать и тег
, но основная причина, по которой лучше использовать тег
некорректное отображение в Opera
Попробовала нарисовать кнопки, как написано в статье.Гораздо проще,чем пользовалась раньше.С фотошопом работать долго,а тут с помощью CSS3 все гораздо удобнее!
В фотошопе нарисовать такую кнопку займет времени ровно 2 минуты, если не меньше ))) Кнопка – градиент – текст.
Но эта статья (как и все остальные) – довольно интересная. Надо пропробовать сделать такую кнопочку. Интересно, в старых браузерах будет работать? Много людей еще, как ни странно, пользуются IE6.
Работать будет, только как обычная кнопка. IE6 не понимает градиентов и обводку
А как правильно вставлять линк на кнопочки?
Можно прописать так
Если указать код: [crayon lang=”html”]текст[/crayon] , кнопочка отлично работает в Opera, Chrome, Mozilla, но IE8 упорно не видит ссылку. А если убрать type=”submit” убивается форматирование, кнопка теряет фиксированную ширину и высоту.
Я не совсем понял что вы хотели написать, что бы вставить код пользуйтесь кнопками в баре “Code”. Вы пробовали тот вариант ссылки что я прописал вам выше?
Красивые, хорошие кнопки. Как радуга, на любой вкус. Почти на всех современных блогах именно такие кнопки можно наблюдать.
Отображается коряво, т.е без стиля, в чем может быть проблема?
Ссылка на изображения http://s018.radikal.ru/i507/1303/d8/3438de4818f6.png
Вы что-то сделали не так. На этом блоге работают именно эти кнопки.
Добрый день! Еще вопрос! как сделать кнопку комментариев таким стилем?
Присваиваем кнопке для комментариев нужный класс css.
Добрый день.
Подскажите пожалуйста, как можно менять цвет данных кнопок (в каких строчках нужно поменять цвета).
Добрый день.
Подскажите пожалуйста, почему две разноцветные кнопки размещенные рядом стали одного цвета? Может код CSS необходимо разделить?