Наверно места просто не хватает.
Если честно, я вообще не вижу никаких кнопок.
Сегодня мы с вами сделаем несколько кнопок на наиболее популярные сети. Только сделаем мы их не с помощью изображений, а с помощью 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
Ага, даже новый пункт меню в низ уходит.CabinetAdmin » Сегодня, 20:24 писал(а):Наверно места просто не хватает
Дык убрал я.CabinetAdmin » Сегодня, 20:24 писал(а):Если честно, я вообще не вижу никаких кнопок.
Добрый день. Установил кнопки соц сетей, всё отоброжается нормально, но при нажатии и переходе получается такая ссылка -
https://satelitray.ru/https//www.facebo ... is.gtaserv
HTML
CSS
Что не так ?
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>
Код: Выделить всё
.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}