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

CabinetAdmin 08 янв 2014, 19:24 Сообщение

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

romaamor 08 янв 2014, 20:52 Сообщение

CabinetAdmin » Сегодня, 20:24 писал(а):Наверно места просто не хватает
Ага, даже новый пункт меню в низ уходит.
CabinetAdmin » Сегодня, 20:24 писал(а):Если честно, я вообще не вижу никаких кнопок.
Дык убрал я.
  • 0

romaamor 18 июн 2017, 11:16 Сообщение

Добрый день. Установил кнопки соц сетей, всё отоброжается нормально, но при нажатии и переходе получается такая ссылка -
https://satelitray.ru/https//www.facebo ... is.gtaserv

HTML

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

<a rel="nofollow" class="rsskt" href="https://satelitray.ru/feed" title="RSS сайта satelitray.ru" target="_blank"></a>

<a rel="nofollow" class="goog" href="https://vk.com/satray" title="satelitray.ru в Контакте" target="_blank"></a>

<a rel="nofollow" class="face" href="https://twitter.com/satelitray" title="satelitray.ru в Twitter" target="_blank"></a>

<a rel="nofollow" class="vkon" href="https://plus.google.com/u/0/communities/107699977379156484399" title="satelitray.ru в Google+" 

<a rel="nofollow" class="twit" href="https://www.facebook.com/satsis.gtaserv/"  title="satelitray.ru В Facebook" target="_blank"></a>
CSS

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

.twit {display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:0 20px 0px  0;padding:0;outline:none;background:url(/images/share42.png) -0px 0 no-repeat;}

.vkon {display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:18px 20px 0px 0;padding:0;outline:none;background:url(/images/share42.png) -32px 0 no-repeat;}

.face {display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:0 20px 0px  0;padding:0;outline:none;background:url(/images/share42.png) -64px 0 no-repeat}

.goog {display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:0 20px 0px 0;padding:0;outline:none;background:url(/images/share42.png) -96px 0 no-repeat}

.rsskt {display:inline-block;vertical-align:bottom;width:32px;height:32px;margin:0 20px 0px 55px;padding:0;outline:none;background:url(/images/share42.png) -128px 0 no-repeat}
Что не так ?
  • 0

CabinetAdmin 18 июн 2017, 14:47 Сообщение

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

romaamor 18 июн 2017, 15:21 Сообщение

CabinetAdmin писал(а): Тег у Google+ не закрытый.
Вот я лох. :milo:
  • 0