Сегодня мы с вами сделаем несколько кнопок на наиболее популярные сети. Только сделаем мы их не с помощью изображений, а с помощью 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;
}
Пример:
Комментарии: 19

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

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

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

eska
Может быть тогда такие подойдут - http://cabinetadmina.ru/viewtopic.php?f=122&t=3930
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

Ариан » Вчера, 23:23 писал(а):CabinetAdmin, поделитесь, пожалуйста, кодом кнопок социальных сетей, которые на этом форуме установлены.
Судя по коду то вроде бутон ? CabinetAdmin Я не ошибаюсь ?
  • 0

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

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

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

CabinetAdmin » 3 минуты назад писал(а):Кнопки от share42. Тема в разделе скриптов.
Ага, сам же тему сделал. :D
Повторю Вау ссыль - http://cabinetadmina.ru/viewtopic.php?f=122&t=3930
  • 0

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

Точно, лохонулся я .
Кнопки социальных сетей с помощью CSS3 - ScreenShot 05.11.13 03-50-19.png
  • 0

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

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

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

Можно, но мне кажется будет не очень, места там и так нету.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

CabinetAdmin » Сегодня, 08:01 писал(а): места там и так нету.
Хочу такие поставить.
Изображение
  • 0

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

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

romaamor 08 янв 2014, 15:44 Сообщение

Не отображается. :(
  • 0

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

:unknown Не знаю, может кеш, может "куда не туда", может ещё чего...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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