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
Просмотров: 918  Скачан: 202 раз  Комментариев в теме: 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" />
Материалы по теме:

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

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

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

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

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

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

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

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

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

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

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

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......
Интересные публикации:

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

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

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

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

Облако теговОблако тегов на css

В данном примере представлен довольно приятный дизайн облака тегов, который реализован с помощью CSS...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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