SAMSURY SITES Tutorial Blog

PUSH BUTTON SOCIAL PROFILE FLAT UI COLOR

Push Button Social Profile Flat UI Color - Betapa pentingnya social profile dari berbagai media sosial untuk kepentinganblog, sebagai sarana komunikasi pemilik blog dan pengunjung. Ada beraneka macam bentuk dan model button mulaidesain sederhana sampai button unik sesuai perkembangan flat ui saat ini yang semuanya bertujuan agar blog tampilbeda dan keren. Sebagai contoh Flat ui download button awesome , Flat UI Button Awesome Modal Dialog , Multibutton download metro ui

DEMO

CSS

HOME AWESOME BUTTON CSS3 FLAT UI Push Button Social Profile Flat UI Color

.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;}

.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;

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.