Sosyal Medya Blogger İzleme Düğmeleri

<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {
    font-family: 'Fira Sans Condensed', sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 25% auto 0 auto;
    text-decoration: none;
}
#be {
    list-style: none;
    text-decoration: none;
    font-size: 0.9em;
    font-family: trebuchet ms, sans-serif;
}
#be a {
    text-decoration: none;
    font-family: trebuchet ms, sans-serif;
}
#be li {
    position: relative;
    height: 38px;
    cursor: pointer;
    padding: 0 !important;
}
#be .facebook,
.googleplus,
.pinterest,
.rss,
.twitter {
    position: relative;
    z-index: 5;
    display: block;
    float: none;
    margin: 10px 0 0;
    width: 210px;
    height: 38px;
    border-radius: 5px;
    background: url(https://lh6.googleusercontent.com/-O_eNfqyGbXY/Ua7QecE1aiI/AAAAAAAAA_M/CyeEAD56u1M/w35-h158-no/facebook+and+google%252B+.png) no-repeat;
    background-color: rgba(217, 30, 118, .42);
    -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    -moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    color: #141414;
    text-align: left;
    text-indent: 50px;
    text-shadow: #333 0 1px 0;
    white-space: nowrap;
    line-height: 32px;
    -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
}
#be li:after {
    position: absolute;
    top: 0;
    left: 50px;
    z-index: 2;
    display: block;
    height: 38px;
    color: #141414;
    content: attr(data-alt);
    line-height: 32px;
}
#be .icon {
    overflow: hidden;
    color: #fafafa;
}
#be .facebook {
    width: 32px;
    height: 32px;
    background-color: rgba(59, 89, 152, 0.42);
    background-position: 0 0;
}
#be .twitter {
    width: 32px;
    height: 32px;
    background-color: rgba(64, 153, 255, 0.42);
    background-position: 0 -33px;
}
#be .googleplus {
    width: 32px;
    height: 32px;
    background-color: rgba(228, 69, 36, 0.42);
    background-position: -3px -66px;
}
#be .pinterest {
    width: 32px;
    height: 32px;
    background-color: rgba(174, 45, 39, 0.42);
    background-position: 0 -95px;
}
#be .rss {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 102, 0, 0.42);
    background-position: -3px -126px;
}
#be li:hover .icon,
.touch #be li .icon {
    width: 210px;
}
.touch #be li .facebook,
#be li:hover .facebook {
    background-color: rgba(59, 89, 152, 1);
}
.touch #be li .twitter,
#be li:hover .twitter {
    background-color: rgba(64, 153, 255, 1);
}
.touch #be li .googleplus,
#be li:hover .googleplus {
    background-color: rgba(228, 69, 36, 1);
}
.touch #be li .pinterest,
#be li:hover .pinterest {
    background-color: rgba(174, 45, 39, 1);
}
.touch #be li .rss,
#be li:hover .rss {
    background-color: rgba(255, 102, 0, 1);
}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'><link>
</head>
<body>
<ul id="be">
    <li data-alt="Bizi Facebook'ta takip et"><a class="icon facebook" href="#" target="blank">Bizi Facebook'ta takip et</a>
    </li>
    <li data-alt="Bizi Google+'da takip et"><a class="icon googleplus" href="#" target="blank">Bizi Google+'da takip et</a>
    </li>
    <li data-alt="Bizi Twitter'da takip et"><a class="icon twitter" href="#" target="blank">Bizi Twitter'da takip et</a>
    </li>
    <li data-alt="Bizi Pinterest'te izleyin"><a class="icon pinterest" href="#" target="blank">Bizi Pinterest'te izleyin</a>
    </li>
    <li data-alt="Bizi Blogger'da izleyin"><a class="icon rss" href="#" target="blank">Bizi Blogger'da izleyin</a>
    </li>
</ul>
</body>
</html>

Kodeks Editör

Sosyal Medya Blogger İzleme Düğmeleri

"Sosyal Medya Blogger İzleme Düğmeleri" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Sosyal Medya Blogger İzleme Düğmeleri

"Sosyal Medya Blogger İzleme Düğmeleri" 0 Yorum yapıldı.

Yorum Gönder