Кнопки социальных сетей на CSS3

      CSS

Здравствуйте, уважаемые читатели XoZbloga! Представляю Вашему вниманию набор социальных медиа кнопок созданный полностью на CSS3. Изображения не используются при создании этих кнопок, так что можно увеличивать размер, без потери качества. Такой результат добивается с помощью @font-face генератора, и правила @font-face в CSS позволяет определить настройки шрифтов. В данном случае изображений социальных сервисов. Все необходимые файлы включены в архив для скачивания.


Кнопки социальных сетей на CSS3

Для того, чтобы кнопочки работали одинаково хорошо во всех браузерах цепляются разные файлы:

  • для Internet Explorer — файл с разрешением EOT;
  • для Firefox — файл с разрешением TTF/OTF;
  • для Opera — файл с разрешением TTF/OTF;
  • для Chrome — файл с разрешением SVG/TTF/OTF;
  • для Safari — файл с разрешением TTF/OTF.

Правило @font-face описывается в файле font.css, а стили для каждой кнопки описаны в ml-social-buttons-dark.css и ml-social-buttons-light.css ну разница в этих файлах не существенна, разные фоны страниц. Вы также масштабировать эти кнопки. Нужно увеличить значение свойства font-size, а также высоту и ширину кнопки.

На этом все!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!