background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Социальные кнопки

Социальные кнопки на CSS
Просмотров: 976  Скачан: 182 раз  Комментариев в теме: 0

Стильные социальные кнопки (Facbook, Twitter, Google+) реализованые с помощью css, к кнопкам применен иконический шрифт, кнопки подойдут для сайта любой тематики. Кнопки работают во всех современных бразерах.

Шаг 1 - создание разметки

 

HTML

<div class="container">
    <div class='inner'>
        <a href="#" class='btn fb'>login<span>with facebook</span></a>
        <a href="#" class='btn tw'>login<span>with twitter</span></a>
        <a href="#" class='btn gp'>login<span>with google+</span></a>
    </div>
    <div class='inner'>
        <a href="#" class='btn fb reverse'>login<span>with facebook</span></a>
        <a href="#" class='btn tw reverse'>login<span>with twitter</span></a>
        <a href="#" class='btn gp reverse'>login<span>with google+</span></a>
    </div>
    <div class='inner'>
        <a href="#" class='btn fb naked'>login<span>with facebook</span></a>
        <a href="#" class='btn tw naked'>login<span>with twitter</span></a>
        <a href="#" class='btn gp naked'>login<span>with google+</span></a>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if gte IE]>
    <link rel="stylesheet" href="css/style_IE.css" media="screen" type="text/css" />
<![endif]-->
<!--[if gte IE]>
    <link rel="stylesheet" href="css/style_IE.css" media="screen" type="text/css" />
<![endif]-->

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/prefixfree.min.js"></script>
Материалы по теме:

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

Pack кнопок #2 на CSS3Pack кнопок #2 на CSS3

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....
Интересные публикации:

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery «Elas...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Free MusicFree Music

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

Социальное меню с подписью на css3Социальное меню с подписью на css3

Стильное социальное меню на css3, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

Отличная кнопка на css3, кнопка реально классная и удобная, да и привлекает глаза посетителя....

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....
  • Текущий 1.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.3/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить