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

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

ОБСУЖДЕНИЕ

Сборка социальных кнопок на css3

Сборка социальных кнопок на css3
Просмотров: 1140  Скачан: 177 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="rip">
    <div class="rip_rip">
        <a href="#" class="facebook socialBtn">Like us on Facebook</a>
        <a href="#" class="twitter socialBtn">Follow me on Twitter</a>
        <a href="#" class="linkedIn socialBtn">Join up on Linked in</a>
        <a href="#" class="flickr socialBtn">Flickr Photostream</a>
        <a href="#" class="rss socialBtn">Grab our RSS feed</a>
        <a href="#" class="skype socialBtn">Add us on Skype</a>
        <a href="#" class="vimeo socialBtn">Watch on Vimeo</a>
        <a href="#" class="viddler socialBtn">Watch on Viddler</a>
        <a href="#" class="deviantart socialBtn">deviantART gallery</a>
        <a href="#" class="paypal socialBtn">Pay using PayPal</a>
        <a href="#" class="dribbble socialBtn">Dribbble shots</a>
    </div>
    <div class="rip_rip">
        <a href="#" class="tumblr socialBtn">Follow my Tumblog</a>
        <a href="#" class="wordpress socialBtn">Wordpress blog</a>
        <a href="#" class="stumbleupon socialBtn">Stumbleupon this</a>
        <a href="#" class="digg socialBtn">Digg this</a>
        <a href="#" class="lastfm socialBtn">Listen on last.fm</a>
        <a href="#" class="youtube socialBtn">YouTube channel</a>
        <a href="#" class="blogger socialBtn">Blogger weblog</a>
        <a href="#" class="google socialBtn">Add to iGoogle</a>
        <a href="#" class="picasa socialBtn">Picasa photo album</a>
        <a href="#" class="gowalla socialBtn">Follow me on Gowalla</a>
        <a href="#" class="designmoo socialBtn">Designmoo resources</a>
    </div>
</div>

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

 

CSS

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

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

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

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

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

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

Красивые кнопки на css3Красивые кнопки на css3

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

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

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

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

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....
Интересные публикации:

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

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

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

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

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

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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