Создание кнопок со значками, но без изображений с использованием CSS

30 марта 2015 | Опубликовано в css | 4 Комментариев »

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

В этих списках мы смогли найти разные коды, которые могут пригодиться на веб-сайте.

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

Демонстрация работы

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

Для начала нужно создать кнопку. В этом примере в качестве кнопки используется обычный прямоугольник с закругленными углами, созданный с помощью CSS3.

Скопируйте код CSS для кнопки, расположенный ниже:

.buttons
{
  display: inline-block;
  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;
  border-radius: .2em;
}

Добавление псевдокласса :before

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

Все, что нам нужно сейчас, — добавить внешние и внутренние отступы, чтобы расположить псевдокласс :before правильно.

Скопируйте код CSS ниже для псевдокласса :before:

.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;
}

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

Задав свойство содержимого псевдоклассу :before, мы можем создать новые классы CSS для разных символов, которые мы хотим использовать.

Ниже находятся разные значки, которые показались нам интересными для кнопок на чистом CSS.

Кнопки с формами

Кнопка, Добавить, Редактировать, Удалить, Сохранить, Письмо, Крест.

Вот кнопки, которые можно использовать для форм:

/*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"; }
.watch:before              { content: "\231A"; }
.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"; }
.whitephone:before         { content: "\260F"; }
.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"; }

Посмотрите на странице с демонстрацией работы, как выглядят значки в браузере.

Автор урока Paul Underwood

Смотрите также:

Опубликовано в css, марта 30, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Евгений
31 марта 2015 в 9:13
+2

И там где нет нормальной поддержки юникод мы увидим квадратики вместо иконок. Лучше использовать FontAwesome
Владимир
3 апреля 2015 в 20:10
0

А как можно сделать окантовку для кнопки при чём с отличающимся цветом относительно основного цвета фона кнопки?

Alex Ответ:
мая 6, 2015 at 11:36 дп

0

поставь border:(толщина) (тип) (цвет);
Например border:1px solid #000;
webinspektor
11 апреля 2015 в 23:02
0

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