Сегодня мы с вами сделаем несколько кнопок на наиболее популярные сети. Только сделаем мы их не с помощью изображений, а с помощью CSS3. Понятное дело, кнопки будут правильно отображаться только в современных браузерах поддерживающих псевдоэлементы:
В нашем примере четыре кнопки:
Всё что нам нужно, это ссылка с нужным классом.
CSS:
Пример:
: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
Может быть тогда такие подойдут - http://cabinetadmina.ru/viewtopic.php?f=122&t=3930
Может быть тогда такие подойдут - http://cabinetadmina.ru/viewtopic.php?f=122&t=3930
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Судя по коду то вроде бутон ? CabinetAdmin Я не ошибаюсь ?Ариан » Вчера, 23:23 писал(а):CabinetAdmin, поделитесь, пожалуйста, кодом кнопок социальных сетей, которые на этом форуме установлены.
Ага, сам же тему сделал.CabinetAdmin » 3 минуты назад писал(а):Кнопки от share42. Тема в разделе скриптов.
Повторю Вау ссыль - http://cabinetadmina.ru/viewtopic.php?f=122&t=3930
Хочу такие поставить.CabinetAdmin » Сегодня, 08:01 писал(а): места там и так нету.
Не, те что я хотел не показываются. Взял скрипт от http://share.pluso.ru/, работает но лезут не туда. Плучаются под меню.