Creative Social Media Button Styles dengan CSS3, HTML5, dan fontawesome

Creative Social Media Button Styles With CSS3, HTML5, and fontawesome

Pada artikel kali ini, kita akan membuat creative social media button tyles menggunakan CSS3, HTML5 dan fontawesome icon yang akan meningkatkan pengalaman desain web Anda.

Sekarang, media sosial adalah platform yang sangat populer. Setiap blogger ingin menampilkan tombol media sosial di situs mereka untuk mempromosikan bisnis mereka. Tombol media sosial ini mendukung semua browser modern. Jadi Anda tidak perlu untuk melakukan riset apapun.

Untuk artikel ini, kita akan menggunakan fontawesome icon.

HTML : Diakhir post, Anda akan menemukan kode html yang sudah lengkap.


<a class="btn_a btn_a_large facebook" href="#">
   <span>
     <i class="fa fa-facebook"></i>
     <span>1500+ Followers</span>
     <p>Facebook</p>
   </span>
</a>

Anda hanya perlu mengganti nama media sosial dan nilai # dengan link profil sosial Anda. Contoh : Jika Anda ingin menambahkan google-plus Anda hanya perlu mengganti facebook menjadi google-plus dan jangan lupa untuk menambahkan link profil google-plus Anda. Untuk sekarang cara ini dapat digunakan di media sosial google-plus, twitter, facebook, pinterest, youtube, dan Instagram. Saya menggunakan semua elemen dalam atribut <a>...</a> sehingga semua dapat diklik. <i class = "fa fa-facebook"></i> digunakan untuk menampilkan ikon facebook. Teks 1500+ Followers dan Facebook dapat Anda ubah sesuai keinginan Anda.

CSS : Diakhir post, Anda akan menemukan kode html yang sudah lengkap.

.btn_a {
width:210px;
overflow:hidden;
display:inline-block;
white-space:nowrap;
vertical-align:baseline;
cursor:pointer;
background:#222;
position:relative;
-moz-transition:all .4s ease;
-webkit-transition:all .4s ease;
transition:all .4s ease;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
margin:0 10px 10px 0;
}

.btn_a:hover {
-webkit-opacity:0.8;
-moz-opacity:0.8;
opacity:0.8;
}

Saya mengatur width:210px; agar pas dengan layout. Dengan mengubah nilai ini, Anda dapat merubahnya agar pas dengan layout website Anda. display: inline-block; digunakan untuk membuat dua kolom. Antara dua ruang kotak media sosial diberi jarak 10px di sebelah kanan dan bawah dengan kode css margin: 0 10px 10px 0; . Ketika Anda menyorotkan mouse pada kotak media sosial, Anda akan melihat efek cahaya kecil, itu dikarenakan nilai opacity: 0.8;

.btn_a span > span {
font-family:verdana;
font-size:13px;
overflow:hidden;
color:#aaa;
position:relative;
top:-3px;
margin:0;
}

.btn_a p {
font-size:22px;
font-family:verdana;
margin:-30px 0 0 42px;
}

font-family:verdana; digunakan disemua kotak media sosial dan mengatur teks jumlah sosial menggunakan font-size:13px; dan color:#aaa; . Untuk nama media sosial yang besar, saya menetapkan ukuran font-size:22px; dan color:#fff; dalam kode berikut:

.btn_a.facebook span > span,.btn_a.twitter span > span,.btn_a.google-plus span > span,.btn_a.pinterest span > span,.btn_a.instagram span > span,.btn_a.youtube span > span {
color:#fff;
}

Anda akan melihat tombol ribbon yang menggunakan kode CSS berikut:

.btn_a span:before {
width:5px;
position:absolute;
color:red;
content:"";
border:6px solid #eee;
right:5px;
top:0;
}

.btn_a span:after {
content:"";
border-bottom:8px solid transparent;
border-left:8px solid #eee;
border-right:9px solid #eee;
position:absolute;
top:12px;
right:5px;
}

Dalam class .btn_a span:before diatur width:5px; dan border:6px; untuk membuat sebuah kotak ribbon. Setelah membuat kotak, pindahkan ke section kanan atas. Di kanan atas saya mengataur jarak right:5px; . Lihat gambar berikut:

Dalam class .btn_a span:after digunakan untuk membuat sebuah segitiga. Setelah membuatnya, pindahkan ke kanan atas agar dapat disesuikan dengan kotak ribbon. Lihat gambar berikut:

Sekarang, mari lihat kode HTML dan CSS yang kita buat

Full HTML :


<a class="btn_a btn_a_large facebook" href="#">
    <span>
 <i class="fa fa-facebook"></i>
 <span>1500+ Followers</span>
 <p>Facebook</p>
    </span>
</a>
    

<a class="btn_a btn_a_large twitter" href="#">
    <span>
 <i class="fa fa-twitter"></i>
 <span>2500+ Followers</span>
 <p>Twitter</p>
    </span>
</a>
    

<a class="btn_a btn_a_large google-plus" href="#">
    <span>
 <i class="fa fa-google-plus"></i>
 <span>9.5M Followers</span>
 <p>Google+</p>
    </span>
</a>
    

<a class="btn_a btn_a_large pinterest" href="#">
    <span>
 <i class="fa fa-pinterest"></i>
 <span>2,100 Followers</span>
 <p>Pinterest</p>
    </span>
</a>


<a class="btn_a btn_a_large youtube" href="#">
    <span>
 <i class="fa fa-youtube"></i>
 <span>5000 Subscribe</span>
 <p>Youtube</p>
    </span>
</a> 


<a class="btn_a btn_a_large instagram" href="#">
    <span>
 <i class="fa fa-instagram"></i>
 <span>3,524 Followers</span>
 <p>Instagram</p>
    </span>
</a>

Full CSS :

/*
* Social Media Button
*/
.btn_a {
width:210px;
overflow:hidden;
display:inline-block;
white-space:nowrap;
vertical-align:baseline;
cursor:pointer;
background:#222;
position:relative;
-moz-transition:all .4s ease;
-webkit-transition:all .4s ease;
transition:all .4s ease;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
margin:0 10px 10px 0;
}

.btn_a:hover {
-webkit-opacity:0.8;
-moz-opacity:0.8;
opacity:0.8;
}

.btn_a span {
display:inline-block;
margin:15px;
}

.btn_a i {
width:30px;
height:30px;
background:rgba(255,255,0,0.5);
line-height:30px;
text-align:center;
border-radius:50%;
position:relative;
top:5px;
margin:0 10px 20px 0;
}

.btn_a span:before {
width:5px;
position:absolute;
color:red;
content:"";
border:6px solid #eee;
right:5px;
top:0;
}

.btn_a span:after {
content:"";
border-bottom:8px solid transparent;
border-left:8px solid #eee;
border-right:9px solid #eee;
position:absolute;
top:12px;
right:5px;
}

.btn_a span > span:before,.btn_a span > span:after {
content:none;
}

.btn_a span > span {
font-family:verdana;
font-size:13px;
overflow:hidden;
color:#aaa;
position:relative;
top:-3px;
margin:0;
}

.btn_a p {
font-size:22px;
font-family:verdana;
margin:-30px 0 0 42px;
}

.btn_a.facebook {
background:#3b5998;
}

.btn_a.facebook i {
background:#fff;
color:#3b5998;
}

.btn_a.twitter {
background:#00aced;
}

.btn_a.twitter i {
background:#fff;
color:#00aced;
}

.btn_a.google-plus {
background:#dd4b39;
}

.btn_a.google-plus i {
background:#fff;
color:#dd4b39;
}

.btn_a.pinterest {
background:#cb2027;
}

.btn_a.pinterest i {
background:#fff;
color:#cb2027;
}

.btn_a.instagram {
background:#517fa4;
}

.btn_a.instagram i {
background:#fff;
color:#517fa4;
}

.btn_a.youtube {
background:#b00;
}

.btn_a.youtube i {
background:#fff;
color:#b00;
}

.btn_a.facebook span > span,.btn_a.twitter span > span,.btn_a.google-plus span > span,.btn_a.pinterest span > span,.btn_a.instagram span > span,.btn_a.youtube span > span {
color:#fff;
}