Membuat Sliding Social Buttons Widget

Sliding Social Buttons Widget | Hai, pada artikel yang akan saya share kali ini adalah sebuah tutorial sosial media dengan efek Slider, widget ini memiliki Efek hover pada setiap social medianya dan dengan angka pada setiap sosial medianya tergantung pengikut di setiap sosial medianya.

Lihat Demonya :

Widget ini memiliki warna yang cerah dan sangat elegan, kalau memang Anda ingin mempraktekannya widget ini tutorialnya seperti ini :

.abt-box {
display: inline-block;
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto 15px auto;
padding: 16px;
background-color: rgba(238, 238, 238, 0.1);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.abt-social {
width: 95%;
max-width: 280px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
.abt-social a {
text-decoration: none !important;
}
.abt-social ul {
font-family: Arial, San-Serif;
margin: 0;
padding: 0;
list-style: none;
}
.abt-social ul li {
display: inline;
margin: 0;
padding: 0;
text-indent: 0
}
.abt-social ul li a.facebook {
border-left: 65px solid rgba(59, 89, 152, 1);
color: rgba(59, 89, 152, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook:hover {
background: rgba(59, 89, 152, 1);
border-left: 0px solid rgba(59, 89, 152, 0.1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.twitter {
border-left: 65px solid rgba(64, 153, 255, 1);
color: rgba(64, 153, 255, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter:hover {
background: rgba(64, 153, 255, 1);
border-left: 0px solid rgba(64, 153, 255, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.gplus {
border-left: 65px solid rgba(219, 74, 57, 1);
color: rgba(219, 74, 57, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus:hover {
background: rgba(219, 74, 57, 1);
border-left: 0px solid rgba(219, 74, 57, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.pinterest {
border-left: 65px solid rgba(174, 45, 39, 1);
color: rgba(174, 45, 39, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest:hover {
background: rgba(174, 45, 39, 1);
border-left: 0px solid rgba(174, 45, 39, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
.abt-social ul li a.rss {
border-left: 65px solid rgba(255, 102, 0, 1);
color: rgba(255, 102, 0, 1);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss:hover {
background: rgba(255, 102, 0, 1);
border-left: 0px solid rgba(255, 102, 0, 1);
color: #fff;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}

<div class="abt-social">
    <ul>
        <li><a class="abt-box facebook" href="#"><p>+15K</p>Facebook </a></li>
        <li><a class="abt-box twitter" href="#"><p>+15K</p>Twitter</a></li>
        <li><a class="abt-box gplus" href="#"><p>+15K&nbsp;</p>Google+</a></li>
        <li><a class="abt-box pinterest" href="#"><p>+15&nbsp;</p>Pinterest</a></li>
        <li><a class="abt-box rss" href="#"><p>+15K</p>RSS</a></li>
    </ul>
</div>

Note: Ganti tanda # dengan url sosial media anda, ganti juga angka +15K dengan jumlah yang anda inginkan.

Demikian artikel ini semoga artikel ini bermanfaat dan mudah untuk di terapkan sama Anda, Silahkan kasih pendapat tentang artikel ini di kolom komentar di bawah ini, Terima Kasih...

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250