Push Button Social Profile with icon awesome and Flat UI Color

1. SAMSURY SITES Tutorial Blog
    

 HOME  AWESOME  BUTTON  CSS3  FLAT UI  Push Button Social Profile Flat UI Color
PUSH BUTTON SOCIAL PROFILE FLAT UI COLOR
Push Button Social Profile Flat UI Color - Betapa pentingnya social profile dari berbagai media sosial untuk kepentingan
blog, sebagai sarana komunikasi pemilik blog dan pengunjung. Ada beraneka macam bentuk dan model button mulai
desain sederhana sampai button unik sesuai perkembangan flat ui saat ini yang semuanya bertujuan agar blog tampil
beda dan keren. Sebagai contoh Flat ui download button awesome , Flat UI Button Awesome Modal Dialog , Multi
button download metro ui
DEMO
CSS

2. .roundbtn {
margin-right: 20px;
}
.roundbtn {
width: 75px;
height: 75px;
border: 5px solid #9a9a9a;
display: inline-block;
background-color: #6c6161;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
-moz-transition: all 35ms linear;
-o-transition: all 35ms linear;
-webkit-transition: all 35ms linear;
transition: all 35ms linear;
-ms-transition: all 35ms linear;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.roundbtn.sea {
border: 5px solid #1abc9c;
background-color: #16a085;
}
.roundbtn.red {
border: 5px solid #d73030;
background-color: #8b1616;
}
.roundbtn.blue {
border: 5px solid #51a9ff;
background-color: #0077ea;
}
.roundbtn.dark {
border: 5px solid #34495e;
background-color: #2c3e50;
}
HTML
<div class="roundbtn dark">
<div class="inner"><span class="text"><i class="fa fa-facebook fa-2x"></i></span>
</div>
</div>
<div class="roundbtn red">
<div class="inner"><span class="text"><i class="fa fa-google-plus fa-2x"></i></span></div>
</div>
<div class="roundbtn blue">
<div class="inner"><span class="text"><i class="fa fa-twitter fa-2x"></i></span>
</div>
</div>
<div class="roundbtn sea">
<div class="inner"><span class="text"><i class="fa fa-linkedin fa-2x"></i></span>
</div>
</div>
Silakan kreasikan sesuai selera baik warna dan ukurannya.
.roundbtn .inner {
position: relative;
width: 75px;
height: 75px;
background-color: #9a9a9a;
margin-top: -8px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
-o-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
-webkit-transition: margin 35ms 35ms, box-shadow 35ms linear;
-webkit-transition-delay: linear, 0s;
 