RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Социальные кнопки на CSS
Просмотров: 1033  Скачан: 185 раз  Комментариев в теме: 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....

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на cs...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на ...

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

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

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

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

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

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

The SameThe Same

Шикарный профессиональный html шаблон имеющий два стиля (светлый и тёмный), на главной странице используется стильный слайдер......

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

Горизонтальное мега меню на css3Горизонтальное мега меню на css3

Отличное горизонтальное меню с большое количество пунктов....

Full галерея на jQueryFull галерея на jQuery

Отличная галерея созданная с помощью Jquery и является одной с лучших полно-экранных галерей. В галерее красиво происходит переход с......

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

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....
  • Текущий 1.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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