Кнопки социальных сетей с помощью CSS3

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Кнопки социальных сетей с помощью CSS3

CabinetAdmin 14 мар 2013, 19:19 Сообщение

Сегодня мы с вами сделаем несколько кнопок на наиболее популярные сети. Только сделаем мы их не с помощью изображений, а с помощью CSS3. Понятное дело, кнопки будут правильно отображаться только в современных браузерах поддерживающих псевдоэлементы: :before и :after.

В нашем примере четыре кнопки:

Код: Выделить всё

<a href="#" class="googleplus" title="Google plus"><span>Google plus</span></a> <a href="#" class="facebook" title="Facebook"><span>Facebook</span></a> <a href="#" class="twitter" title="Twitter"><span>Twitter</span></a> <a href="#" class="vk" title="Вконтакте"><span>Вконтакте</span></a>


Всё что нам нужно, это ссылка с нужным классом.

CSS:

Код: Выделить всё

/* Social buttons by cabinetadmina.ru */ .googleplus { position: relative; font-size: 20px; height: 2em; width: 2em; background: #B9290B; background-image: -moz-linear-gradient(#E74624, #B9290B); background-image: -webkit-gradient(linear, left top, left bottom, from(#E74624), to(#B9290B)); background-image: -webkit-linear-gradient(#E74624, #B9290B); background-image: -o-linear-gradient(#E74624, #B9290B); background-image: -ms-linear-gradient(#E74624, #B9290B); background-image: linear-gradient(#E74624, #B9290B); overflow: hidden; display: inline-block; border: 1px solid #7B220C; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; } .googleplus:before { left: -0.1em; font-size: 2.9em; top: -0.36em; position: absolute; display: block; content: "g"; color: #EDEEE8; font-family: georgia; } .googleplus:after { left: 0.9em; top: -0.3em; position: absolute; display: block; content: "+"; font-size: 1.25em; font-weight: bold; color: #EDEEE8; font-family: georgia; } .googleplus span { display: none; } .facebook { position: relative; font-size: 20px; height: 2em; width: 2em; background-color: #4D68A3; background-image: -moz-linear-gradient(#526CA6, #2F5495); background-image: -webkit-gradient(linear, left top, left bottom, from(#526CA6), to(#2F5495)); background-image: -webkit-linear-gradient(#526CA6, #2F5495); background-image: -o-linear-gradient(#526CA6, #2F5495); background-image: -ms-linear-gradient(#526CA6, #2F5495); background-image: linear-gradient(#526CA6, #2F5495); display: inline-block; border: 1px solid #7690C9; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; } .facebook:before { left: 0.85em; top: 0.7em; position: absolute; display: block; content: ""; height: 0.3em; width: 0.85em; background: #EDEEE8; } .facebook:after { left: 1.1em; top: 0.1em; position: absolute; display: block; content: ""; height: 1.5em; width: 0.3em; -moz-border-radius: 0.4em 0 0 0; -webkit-border-radius: 0.4em 0 0 0; border-radius: 0.4em 0 0 0; border: 0.3em solid #EDEEE8; border-right: 0; border-bottom: 0; } .facebook span { display: none; } .twitter { position: relative; font-size: 20px; height: 2em; width: 2em; background-color: #98D2DE; background-image: -moz-linear-gradient(#DCF0F8, #98D2DE); background-image: -webkit-gradient(linear, left top, left bottom, from(#DCF0F8), to(#98D2DE)); background-image: -webkit-linear-gradient(#DCF0F8, #98D2DE); background-image: -o-linear-gradient(#DCF0F8, #98D2DE); background-image: -ms-linear-gradient(#DCF0F8, #98D2DE); background-image: linear-gradient(#DCF0F8, #98D2DE); display: inline-block; border-style: solid; border-width: 1px; border-color: #B6DDEB #70B3C0 #5DACB6; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; } .twitter:before { left: 0.55em; top: 0.4em; position: absolute; display: block; content: ""; height: 1.2em; width: 0.32em; background-color: #137EC2; background-image: -moz-linear-gradient(#137EC2, #079CDB); background-image: -webkit-gradient(linear, left top, left bottom, from(#137EC2), to(#079CDB)); background-image: -webkit-linear-gradient(#137EC2, #079CDB); background-image: -o-linear-gradient(#137EC2, #079CDB); background-image: -ms-linear-gradient(#137EC2, #079CDB); background-image: linear-gradient(#137EC2, #079CDB); -moz-border-radius: 0.5em 0.5em 0 0.9em; -webkit-border-radius: 0.5em 0.5em 0 0.9em; border-radius: 0.5em 0.5em 0 0.9em; -moz-box-shadow: 0 0 0 0.15em #EDEEE8; -webkit-box-shadow: 0 0 0 0.15em #EDEEE8; box-shadow: 0 0 0 0.15em #EDEEE8; } .twitter:after { left: 0.87em; top: 1.143333em; position: absolute; display: block; content: ""; height: 0.32em; width: 0.62em; background: #079CDB; -moz-border-radius: 0 0.4em 0.4em 0; -webkit-border-radius: 0 0.4em 0.4em 0; border-radius: 0 0.4em 0.4em 0; -moz-box-shadow: 0 -0.57em 0 -0.15em #218CCD,-0.2em -0.57em 0 -0.15em #218CCD,0 -0.57em 0 0em #EDEEE8; -webkit-box-shadow: 0 -0.57em 0 -0.15em #218CCD,-0.2em -0.57em 0 -0.15em #218CCD,0 -0.57em 0 0em #EDEEE8; box-shadow: 0 -0.57em 0 -0.15em #218CCD,-0.2em -0.57em 0 -0.15em #218CCD,0 -0.57em 0 0em #EDEEE8; border: 0.15em solid #EDEEE8; border-left: 0; } .twitter span { display: none; } .vk { position: relative; font-size: 20px; height: 2em; width: 2em; background: #436E91; border: 1px solid #5F748B; display: inline-block; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; } .vk:before { left: 0.3em; top: 0.3em; position: absolute; display: block; content: ""; height: 1.4em; width: 1.4em; background: #EDEEEE; } .vk:after { left: 0.48em; top: 0.2em; position: absolute; display: block; content: "B"; font-size: 1.2em; font-weight: bold; font-family: Verdana, Helvetica, Arial, sans-serif; color: #275883; } .vk span { display: none; }


Пример:
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
eska

Re: Кнопки социальных сетей с помощью CSS3

eska 07 авг 2013, 06:17 Сообщение

У вас отличный набор социальных закладок, но можно ли поставить их не в КСС, а каким-то другим образом, просто публика моего клуба ГАЗ, от 35-60 и более лет и не все они используют хорошие браузеры, некоторые сидят с виндовс XP со стандартного интернет эксплорера, вот такие дела, жду ответа:)

Аватара пользователя
CabinetAdmin

Re: Кнопки социальных сетей с помощью CSS3

CabinetAdmin 07 авг 2013, 14:46 Сообщение

eska
Может быть тогда такие подойдут - Кнопки социальных сетей от share42
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Ариан

Re: Кнопки социальных сетей с помощью CSS3

Ариан 04 ноя 2013, 22:23 Сообщение

CabinetAdmin, поделитесь, пожалуйста, кодом кнопок социальных сетей, которые на этом форуме установлены.

Аватара пользователя
romaamor

Re: Кнопки социальных сетей с помощью CSS3

romaamor 05 ноя 2013, 04:12 Сообщение

Ариан » Вчера, 23:23 писал(а):CabinetAdmin, поделитесь, пожалуйста, кодом кнопок социальных сетей, которые на этом форуме установлены.

Судя по коду то вроде бутон ? CabinetAdmin Я не ошибаюсь ?

Аватара пользователя
CabinetAdmin

Re: Кнопки социальных сетей с помощью CSS3

CabinetAdmin 05 ноя 2013, 04:17 Сообщение

Кнопки от share42. Тема в разделе скриптов.

Аватара пользователя
romaamor

Re: Кнопки социальных сетей с помощью CSS3

romaamor 05 ноя 2013, 04:21 Сообщение

CabinetAdmin » 3 минуты назад писал(а):Кнопки от share42. Тема в разделе скриптов.

Ага, сам же тему сделал. :D
Повторю Вау ссыль - Кнопки социальных сетей от share42


Аватара пользователя
romaamor

Re: Кнопки социальных сетей с помощью CSS3

romaamor 07 янв 2014, 23:52 Сообщение

Вопрос. А можно кнопки соц сетей вставить в моё верхнее, фиксированное меню ?

Аватара пользователя
CabinetAdmin

Re: Кнопки социальных сетей с помощью CSS3

CabinetAdmin 08 янв 2014, 07:01 Сообщение

Можно, но мне кажется будет не очень, места там и так нету.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Кнопки социальных сетей с помощью CSS3

romaamor 08 янв 2014, 12:06 Сообщение

CabinetAdmin » Сегодня, 08:01 писал(а): места там и так нету.

Хочу такие поставить.
Изображение

Аватара пользователя
CabinetAdmin

Re: Кнопки социальных сетей с помощью CSS3

CabinetAdmin 08 янв 2014, 14:00 Сообщение

Ну дык, попробуй. Там пункты меню обёрнуты в <li></li>. Добавь в них код кнопок, посмотри как будет выглядеть.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Аватара пользователя
CabinetAdmin

Re: Кнопки социальных сетей с помощью CSS3

CabinetAdmin 08 янв 2014, 16:05 Сообщение

:unknown Не знаю, может кеш, может "куда не туда", может ещё чего...
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Кнопки социальных сетей с помощью CSS3

romaamor 08 янв 2014, 16:11 Сообщение

Не, те что я хотел не показываются. Взял скрипт от http://share.pluso.ru/, работает но лезут не туда. Плучаются под меню.



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 2 гостя