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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фоном

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансформации

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимися ико...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......
  • Текущий 1.64/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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