Membuat Tombol / Button Keren campur Font Awesome

Demo Download Button

Membuat Tombol / Button ini sudah menjamur di dunia blogger, berbagai kreasi dari para blogger dengan kreatifitasnya sendiri menciptakan tombol / button yang menarik, penuh warna, dan tentu saja ada yang ber-animasi. Saya sebenarnya mencari cara membuat button ber-animasi, tapi sebelum itu, saya ingin berbagi cara membuat tombol / button demo + download dikombinasikan dengan font awesome. Langsung saja, berikut tutorial membuat tombol demo dan download bonus font awesome .

Tutorial :

1. Buka Blogger.
2. Template > Edit HTML
3. Copy code CSS dibawah ini, dan letakkan / paste tepat diatas kode </head>, saya berikan versi terbaru ( 2015 ) :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

4. Selanjutnya, silahkan copy code dibawah ini, dan paste / tempel tepat diatas kode ]]></b:skin> atau </style>

.buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}

.buttonx ul {
margin:0;padding:0
}

.buttonx li{
display:inline;
margin:0;
padding:0
}

.demo {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #E55E48; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.download {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #2ecc71; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.demo:hover { 
background: #454242;
text-decoration:none 
}

.download:hover { 
background: #454242;
text-decoration:none 
}

.download:before { 
content : "\f019"; 
font-family : FontAwesome; 
font-weight : normal; 
padding :11px 11px 9px !important; 
background : #27ae60; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
}

.demo:before { 
content : "\f06e"; 
font-family : FontAwesome; 
font-weight : normal; 
padding : 11px 11px 9px !important; 
background : #c0392b; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 16px; 
}

5. Save Template / Simpan Template.

Cara Menggunakan :

Gunakan kode berikut ini, di entri / laman baru, di tab HTML mode / disamping Compose.

<div style="text-align: center;">
<ul class="buttonx">
<li><a class="demo" href="http://zonahentongerz.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://zonahentongerz.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Demo Download

Silahkan ganti url address : http://zonahentongerz.blogspot.com dengan alamat url yang kamu inginkan.

Sumur : http://www.madamvia.web.id/2014/12/membuat-tombol-demo-download-otomatis-font-awesome.html