кнопки css
Заметки по CSS

Красивые 3D-кнопки с помощью CSS3

кнопки css

С появлением технологии CSS3 расширились возможности веб-дизайнеров, позволяющие в ряде случаев при создание сайта заменить использование изображений на чистый CSS-код. Так например можно поступить с кнопками, хотя раньше нам мог помочь только PhotoShop.

На днях я увидел кнопки css которые нарисовал Dimox подчерпнув идею на англоязычном блоге PremiumPixels.com
С помощью CSS3 он “нарисовал” кнопоки, кодом которых я поделюсь в данной статье.
HTML-код кнопки будет таким:

[crayon lang=’html’][/crayon]

Ниже приведены примеры кнопок. CSS-код понравившегося цвета кнопки вы можете скопировать из поля под соответствующей кнопкой.

[spoiler name=”Примеры кнопок”]

[/spoiler]

Новые посты

CSS3 стили изображения с изменяющимся размером

Гордеев Игорь

Красивые градиентные кнопки на CSS3 для всех браузеров

Гордеев Игорь

Генератор CSS 3.0 Maker – создание css стилей

Гордеев Игорь

16 комментариев

Дмитрий 24.01.2012 / 18:56

У меня конечно небольшой опыт в создании сайтов, но скажите, почему вместо тега

вы используете тег

Ответить
Гордеев Игорь 25.01.2012 / 00:56

Можно использовать и тег

, но основная причина, по которой лучше использовать тег

некорректное отображение в Opera

Ответить
Christina 25.01.2012 / 19:10

Попробовала нарисовать кнопки, как написано в статье.Гораздо проще,чем пользовалась раньше.С фотошопом работать долго,а тут с помощью CSS3 все гораздо удобнее!

Ответить
Лариса 07.02.2012 / 20:10

В фотошопе нарисовать такую кнопку займет времени ровно 2 минуты, если не меньше ))) Кнопка – градиент – текст.

Но эта статья (как и все остальные) – довольно интересная. Надо пропробовать сделать такую кнопочку. Интересно, в старых браузерах будет работать? Много людей еще, как ни странно, пользуются IE6.

Ответить
Гордеев Игорь 07.02.2012 / 22:31

Работать будет, только как обычная кнопка. IE6 не понимает градиентов и обводку

Ответить
Энни 06.04.2012 / 01:21

А как правильно вставлять линк на кнопочки?

Ответить
Гордеев Игорь 06.04.2012 / 09:35

Можно прописать так

Ответить
Энни 06.04.2012 / 12:54

Если указать код: [crayon lang=”html”]текст[/crayon] , кнопочка отлично работает в Opera, Chrome, Mozilla, но IE8 упорно не видит ссылку. А если убрать type=”submit” убивается форматирование, кнопка теряет фиксированную ширину и высоту.

Ответить
Гордеев Игорь 06.04.2012 / 13:40

Я не совсем понял что вы хотели написать, что бы вставить код пользуйтесь кнопками в баре “Code”. Вы пробовали тот вариант ссылки что я прописал вам выше?

Ответить
Traveler 31.05.2012 / 23:32

Красивые, хорошие кнопки. Как радуга, на любой вкус. Почти на всех современных блогах именно такие кнопки можно наблюдать.

Ответить
Александр 17.03.2013 / 02:59

Отображается коряво, т.е без стиля, в чем может быть проблема?

Ссылка на изображения http://s018.radikal.ru/i507/1303/d8/3438de4818f6.png

Ответить
Гордеев Игорь 18.03.2013 / 13:19

Вы что-то сделали не так. На этом блоге работают именно эти кнопки.

Ответить
Александр 24.03.2013 / 16:18

Добрый день! Еще вопрос! как сделать кнопку комментариев таким стилем?

Ответить
Гордеев Игорь 26.03.2013 / 17:41

Присваиваем кнопке для комментариев нужный класс css.

Ответить
Сергей 22.02.2016 / 09:11

Добрый день.
Подскажите пожалуйста, как можно менять цвет данных кнопок (в каких строчках нужно поменять цвета).

Ответить
Сергей 22.02.2016 / 20:49

Добрый день.
Подскажите пожалуйста, почему две разноцветные кнопки размещенные рядом стали одного цвета? Может код CSS необходимо разделить?

Ответить

Оставить комментарий