Делаем красивую кнопку используя CSS3

Делаем красивую кнопку используя CSS3 sofcase.net

Я уже показывал пример как стилизировать текстовое поле используя CSS3, сегодня я хочу рассказать как создавать красивые кнопки используя CSS3. В примере я буду использовать свойства text-shadow, box-shadow, gradient и border-radius. К сожалению градиент поддерживается в данный момент только в Google Chrome, Safari и Firefox.
« Комментарии

Похожие анонсы

Красиво стилизируем текстовое поле формы используя CSS3 @ 31.08.2011 20:32
И так, о некоторых свойствах CSS3 я уже написал, теперь я хочу показать как их можно использовать на примере стилизации элементов форм. В примере я буду использовать такие свойства из CSS3 как border-radius, box-shadow и transition(анимация).
Поговорим про некоторые свойства CSS3 (часть первая) @ 31.08.2011 12:18
В этой статье я хочу рассказать про некоторые свойства CSS3, а именно про такие как: border-radius, box-shadow, text-shadow и множественные фоны. Всем им есть применение, я все чаще замечаю их использование на зарубежный сайтах, даже в дизайне моего блога используется text-shadow и border-radius, а вот с сайтами юанета и рунета, все очень плохо. Все свойства указаные в этой статье поддерживаются в Google Chrome, Safari, Mozilla Firefox и Opera.
Simple messages boxes @ 02.09.2011 07:39
Сегодня я хочу поделится с вами готовыми стилями для уведомляющих сообщениях. Изначально я их делал для стока, но увы их не приняли, вот и решил после поделиться бесплатно с народом. Использовал свойства CSS3, а именно такие свойства как border-radius, box-shadow, text-shadow и градиенты, так что идеально они смотрятся только в Google Chrome и Mozilla Firefox.
Свойства CSS3, которые Вы должны знать @ 10.05.2011 19:43
В CSS3 есть поддержка большого числа новых свойств, которые Вы должны использовать, ибо они делают ваш сайт намного привлекательнее, а так же упрощают веб-разработчику работу над различными эффектами и элементами.В данном посте я хочу привести набор тех CSS3 свойств, которые наиболее интересны и часто применяются. Это такие свойства, как Box shadow, Border radius, Text shadow и другие.
Поговорим про некоторые свойства CSS3 (часть вторая) @ 01.09.2011 07:04
И так, в первой части я уже вас познакомил со свойствами border-radius, text-shadow, box-shadow и множественными фонами. В этот раз я хочу познакомить вас с transition(анимация), resize, и background-size. Еще обещал рассказать про подключения сторонних шрифтов, но о них наверно позже (плюс прямого отношения к CSS3 они не имеют).
Создаем круглые углы при помощи CSS3 border-radius @ 22.03.2010 19:43
Сегодня я напишу про свойство CSS3 — border-radius (css3 радиус рамки / css3 радиус границы). При помощи CSS3 border-radius вы сможете создать очень популярный эффект закругленных углов для ваших кнопок, рамок и боксов, используя лишь CSS, никаких картинок и скриптов ненужно.
Создаем красивые обьемные 3D тэги при помощи CSS3 @ 28.05.2013 14:18
Сегодня мы собираемся создать объемные теги на CSS. Для этого нам понадобится свойства box-shadow, text-shadow и border-radius. Метод, показанный в этом уроке, вы сможете легко добавить на любой веб-сайт. Мы создадим теги в форме 3D-кнопки. Если у вас есть сайт под управлением WordPress, то вам понадобится этот пример или подобный ему, чтобы стилизовать облако тегов. Вот как это выглядит:
Красивая CSS3 форма поиска @ 16.06.2010 20:33
Вы знали что можно сделать круг с помощью css3 закругленных краев (border-radius) и сделать для него внутреннюю тень с помощью box-shadow? Сечйас попробуем создать форму поиска используя css3 эффекты закругления углов и внутренней тени.
CSS тень с помощью box-shadow @ 28.09.2010 07:49
Продолжение серии уроков по новым возможностям CSS3. В первых двух уроках мы уже рассмотрели две интересных штучки: border-radius и text-shadow. Теперь пришла очередь к box-shadow. Его функциональность схожа с text-shadow, но область применения куда больше, да и есть пару интересных дополнений. Как всегда подробно пройдемся по возможных параметрам и посмотрим, какой параметр и за что отвечает.
Скрытые возможности text-shadow @ 08.01.2011 14:53
Простой способ создать придать тексту на сайте эффект 3D с помощью CSS3-свойства text-shadow. А также несколько расширенных авторских примеров использования text-shadow эффектов в дизайне сайтов.

Спонсоры

Авторизация

Имя:
Пароль:
 

Друзья проекта

Активность на сайте