Главная » HTML & CSS » Небольшой набор стилей CSS3 для создания кнопок

Небольшой набор стилей CSS3 для создания кнопок

Небольшой набор стилей CSS3 для создания кнопок

Предлагаю очередной небольшой набор правил и свойств , для преобразования html-тегов a, input и button в привлекательные с градиентной заливкой.
С помощью привязки тегов html через определённые классы, с полностью сформированными значениями свойств и правил CSS, вам будет намного проще внедрять на страницы ваших проектов, элементы управления пользовательского интерфейса в виде кнопок.

Использовать данный набор стилей очень просто:
Добавляете к ссылке класс «btn» и всё, стандартная белая кнопка с легким градиентом готова, а в сочетании с классом определенного цвета, вы получите кнопку совершенно другой расцветки, например, добавив к ссылке классы «btn btn-blue», на странице появится градиентная кнопка синего цвета.

<a href="#" class="btn">Кнопка</a>
<a href="#" class="btn btn-blue">Кнопка</a>

Всё тоже самое и с преобразованием в кнопки тегов <input> и <button>
В набор включены стили для кнопок белого, синего, красного и зеленого цвета

На счёт отображения кнопок в разных браузерах:
В современных версиях стопроцентная поддержка всех свойств CSS3. В Internet Explorer 8-й и 9-й версий, градиентную заливку вы не увидите, кнопки примут плоскую форму со сплошной заливкой, что собственно не делает их хуже в плане восприятия, тем более что плоский дизайнерский стиль нынче в моде.

С уважением, Андрей

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru