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

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

ОБСУЖДЕНИЕ

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

Социальные кнопки с помощью css
Просмотров: 934  Скачан: 207 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="container">
    <a href="#" class="facebook" title="Facebook"></a>
    <a href="#" class="twitter" title="Twitter"></a>
    <a href="#" class="google" title="Google+"></a>
    <a href="#" class="myspace" title="Myspace"></a>
    <a href="#" class="linkedin" title="LinkedIn"></a>
    <a href="#" class="feed" title="RSS Feed"></a>
    <a href="#" class="lastfm" title="Last.fm"></a>
    <a href="#" class="vimeo" title="Vimeo"></a>
    <a href="#" class="youtube" title="YouTube"></a>
    <a href="#" class="dribbble" title="Dribbble"></a>
    <a href="#" class="forrst" title="Forrst"></a>
    <a href="#" class="gowalla" title="Gowalla"></a>
    <a href="#" class="skype" title="Skype"></a>
    <a href="#" class="tumblr" title="Tumblr"></a>
    <a href="#" class="wordpress" title="Wordpress"></a>
    <a href="#" class="blogger" title="Blogger"></a>
    <a href="#" class="digg" title="Digg"></a>
    <a href="#" class="stumbleupon" title="Stumbleupon"></a>
    <a href="#" class="pinterest" title="Pinterest"></a>
    <a href="#" class="flickr" title="Flickr"><span class="cyan"></span><span class="magenta"></span></a>
    <a href="#" class="yahoo" title="Yahoo!"></a>
    <a href="#" class="deviantart" title="DeviantArt"></a>
    <a href="#" class="behance" title="Behance"></a>
    <a href="#" class="sharethis" title="ShareThis"></a>
</div>

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

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
Материалы по теме:

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

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

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

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

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

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

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

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......
Интересные публикации:

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MySQL

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню на css

Горизонтальное многоуровневое фиксированного меню в темном стиле...

Галерея на jQueryГалерея на jQuery

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

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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