Несколько примеров CSS3 — кнопок

В статье Красивые кнопки для сайта я написала о том, как создать красивые кнопки не используя графических редакторов и рисунков вообще. В этой статье мы научимся добавлять к нашим кнопкам иконки.
Напоминаю, что html-код нашей кнопки был следующим:
Code<a href=»#» class=»botton»>Кнопка</a>
Стили класса botton Вы можете найти так же в статье указанной выше.
Выглядит это кнопка примерно так:
Несколько примеров CSS3 - кнопок

А теперь давайте добавим дополнение: Сначала добавим в CSS Code
.bottonsmall:before
{  
  font-size: 18px; // размер иконки  
  padding: 0 5px 0 0; // отступы от иконки  
}

Ну а далее, все зависит от того, какая кнопка Вам требуется:

1. Кнопка Добавить

Добавить

HTML-код

Code<a href=»#» class=»botton add»>Добавить</a>

CSS код

Code.add:before
{
  content: «\271A»;
}

2. Кнопка Редактировать

Редактировать

HTML-код

Code<a href=»#» class=»botton edit»>Редактировать</a>

CSS код

Code.edit:before
{
  content: «\270E»;
}

3. Кнопка Удалить

Удалить

HTML-код

Code<a href=»#» class=»botton delete»>Удалить</a>

CSS код

Code.delete:before
{
  content: «\2718»;
}

4. Кнопка Сохранить

Сохранить

HTML-код

Code<a href=»#» class=»botton save»>Сохранить</a>

CSS код

Code.save:before
{
  content: «\2714»;
}

5. Кнопка e-mail

e-mail

HTML-код

Code<a href=»#» class=»botton email»>e-mail</a>

CSS код

Code.email:before
{
  content: «\2709»;
}

6. Кнопка Понравилось

Понравилось

HTML-код

Code<a href=»#» class=»botton like»>Понравилось</a>

CSS код

Code.like:before
{
  content: «\2764»;
}

6. Кнопка Следующее

Следующее

HTML-код

Code<a href=»#» class=»botton next»>Следующее</a>

CSS код

Code.next:before
{
  content: «\279C»;
}

7. Кнопка Избранное

Избранное

HTML-код

Code<a href=»#» class=»botton star»>Избранное</a>

CSS код

Code.star:before
{
  content: «\2605»;
}

8. Кнопка Play

Play

HTML-код

Code<a href=»#» class=»botton play»>Play</a>

CSS код

Code.play:before
{
  content: «\25B6»;
}

Почему использование CSS вместо изображений лучше?

1. Скорость загрузки выше, так как загружается просто текст
2. Размер иконки зависит от свойства font-size
3. Фон и цвет иконки можно так же задавать в CSS

Поддержка браузерами

Для применения таких иконок используется псевдоэлемент :before , поэтому в браузерах IE старше 8 версии, иконки отображаться не будут.
Несколько примеров CSS3 - кнопок

Источник: Just some other awesome CSS3 buttons

Комментарии на Facebook