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

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

ОБСУЖДЕНИЕ

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

Сборка социальных кнопок на css3
Просмотров: 1230  Скачан: 189 раз  Комментариев в теме: 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" />
Материалы по теме:

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

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

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

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

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

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

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

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

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

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

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

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

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

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

ClockerClocker

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

Контактная форма (дизайн)Контактная форма (дизайн)

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

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

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

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Boxes M...

Меню в виде куба с красивым эффектом трансформации....

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...
  • Текущий 1.70/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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