Как создать кнопки со значками без изображений при помощи CSS3


CSS3 предоставляет разработчикам широкие возможности для более легкой и быстрой реализации многих вещей при разработке сайта. Новые свойства позволяют реализовать различные эффекты без применения дополнительной графики. После прочтения некоторых статей про то, как можно создать кнопки при помощи CSS3, я заинтересовался, как можно использовать этот эффект, чтобы получить значки на кнопках без использования изображений.

Иногда веб-разработчик не очень ладит с графическими программами, и у него могут возникнуть трудности при создании подходящего изображения. И в тоже время он не может оказаться от изображений в некоторых элементах сайта. Лучше если браузер сам отобразит нужную графику, а разработчик совсем не будет использовать для этого изображения.

Здесь нам могут помочь псевдо символы. Используем и мы этот трюк для того чтобы отобразить иконки на кнопках, не используя изображения. Просто укажем в правилах CSS нужные нам коды символов.

Я обнаружил, что есть полным-полно иконок, которые можно использовать в CSS задавая их шестнадцатеричные представления. Для тех кто интересуется этими символами более подробно, на помощь придет великий Гугл. Вы можете быстро найти стандарты символов юникода например, или таблицы кодировок UTF-8. Словом не буду здесь останавливаться подробно.

Из этих списков я смог найти самые разные коды, которые могут быть полезны на ваших сайтах. Теперь у нас есть коды для иконок, которые мы хотим, и я собираюсь показать вам, как применять их для кнопок только лишь при помощи CSS. Для этого используем селектор :before,чтобы добавить содержимое для вашего класса.

Создание кнопки

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

.buttons { display: inline-block; white-space: nowrap; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */ border: 1px solid #a1a1a1; padding: 0 2em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } 

Так, мы описали основной вид кнопки. Но у кнопки есть разные состояния, поэтому мы должны описать и их тоже. Ниже приведен полный листинг правил для базовой кнопки. Можете скопировать его целиком в свой файл стилей. А потом уже использовать описание, которые следуют ниже для оформления нужной вам кнопки.

.buttons { display: inline-block; white-space: nowrap; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */ border: 1px solid #a1a1a1; padding: 0 2em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .buttons:hover { background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */ } .buttons:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; } .buttons:focus { outline: 0; background: #fafafa; } .buttons:before { float: left; width: 1em; text-align: center; font-size: 1.7em; margin: 0 0.5em 0 -1em; padding: 0 .2em; pointer-events: none; } 

Теперь правила для самих кнопок и внешний вид этих кнопок.

 

Кнопки форм

/*Forms*/ .add:before { content: "\271A"; } .edit:before { content: "\270E"; } .delete:before{ content: "\2718";} .save:before{ content: "\2714";} .email:before{ content: "\2709";} .cross:before { content: "\2716"; } 

 

Кнопки Валют

/*Currency*/ .dollar:before{ content:"\0024"; } .euro:before{ content:"\20AC"; } .pound:before{ content: "\00A3";} .cent:before { content: "\20B5"; } 

 

Кнопки Температур

/*Temp*/ .celsius:before { content: "\2103"; } .fahrenheit:before { content: "\2109"; } 

 

Кнопки Математических символов

/*Math & Factions*/ .pi:before { content: "\213C"; } .one_thrid:before { content: "\2153"; } .two_thrid:before { content: "\2154"; } .one_fifth:before { content: "\2155"; } .two_fifth:before { content: "\2156"; } .three_fifth:before { content: "\2157"; } .four_fifth:before { content: "\2158"; } .one_sixth:before { content: "\2159"; } .five_sixth:before { content: "\215A"; } .one_eighth:before { content: "\215B"; } .three_eighth:before { content: "\215C"; } .five_eighth:before { content: "\215D"; } .seven_eighth:before { content: "\215E"; } .quarter:before { content: "\00BC"; } .half:before { content: "\00BD"; } .three_quarter:before { content: "\00BE"; } 

 

Кнопки Стрелки

/*Arrows*/ .next:before{ content: "\279C";} .left_arrow:before { content: "\2190"; } .up_arrow:before { content: "\2191"; } .right_arrow:before { content: "\2192"; } .down_arrow:before { content: "\2193"; } .up_left_arrow:before { content: "\2196"; } .up_right_arrow:before { content: "\2197"; } .down_left_arrow:before { content: "\2199"; } .down_right_arrow:before { content: "\2198"; } 

 

Кнопки Разные символы

/*Symbols*/ .like:before{ content: "\2764";} .star:before{ content: "\2605";} .spark:before{ content: "\2737";} .play:before{ content: "\25B6";} .blacksun:before { content: "\2600"; } .cloud:before { content: "\2601"; } .umbrella:before { content: "\2602"; } .snowman:before { content: "\2603"; } .blackstar:before { content: "\2605"; } .whitestar:before { content: "\2606"; } .blackphone:before { content: "\260E"; } .saltire:before { content: "\2613"; } .hot_drink:before { content: "\2615"; } .skull:before { content: "\2620"; } .radioactive:before { content: "\2622"; } .biohazard:before { content: "\2623"; } .peace:before { content: "\262E"; } .yingyang:before { content: "\262F"; } .frowning_face:before { content: "\2639"; } .smiling_face:before { content: "\263A"; } .first_quarter_moon:before { content: "\263D"; } .last_quarter_moon:before { content: "\263E"; } .wheelchair:before { content: "\267F"; } .recycle:before { content: "\267D"; } .recycle2:before { content: "\267C"; } .music_note:before { content: "\266C"; } .warning:before { content: "\26A0"; } .male_and_female:before { content: "\26A4"; } .scissors:before { content: "\2701"; } .airplane:before { content: "\2708"; } .snow:before { content: "\2042"; } 

 

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

смотреть демо

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

3 комментария

  1. Виталий09/03/2015
  2. Skrimm22/07/2012

Добавить коментарий

16 − одиннадцать =