вход

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

Как создать кнопки со значками без изображений при помощи 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 комментария

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

  1. Skrimm:

    Да css клевая штука , а вот откуда берутся сами рисунки? Есть таблица с их списком?

  2. Подчеркивание у ссылок в кнопке лишние. Убрать бы желательно..

  3. Виталий:

    Аналогичный вопрос, откуда эти иконки берутся, есть ли список какой код какой иконке соответствует, насколько это кроссбраузерно, будет ли это работать на андроиде или IOS?

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

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

Правила комментирования

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