DEMO JOKO TOLE: Tombol Demo dan Download Blog Krizeer

Tambahkan kode di bawah ini sebelum/di atas ]]></b:skin>

/* Tombol Demo & Download ala Blog Krizeer
----------------------------------------------- */
.kotak-demo-download {
float:left;list-style:none;text-align:center;width: 100%;margin:8px 0!important;padding:0;font-size:14px;clear:both;font-family:Oswald, Open Sans, Arial, sans-serif;text-transform:uppercase;
}
.kotak-demo-download ul {
margin:0;padding:0
}
.kotak-demo-download li{
display:inline;margin:0;padding:0;
}
.demo {
border: 1px solid #d24932;border-bottom-color:#c84934;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px;
}
.download {
border: 1px solid #549dd4;border-bottom-color:#4b8cbe;box-shadow:1px 1px 1px #aaa;padding: 7px 40px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;
}
.demo:hover {
background: #d94a33;box-shadow:none;border-color:#d0412a #d0412a #c43d27; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222;
}
.download:hover {
background: #4296d5;box-shadow:none;border-color:#378dcd #378dcd #2a80c0; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222}

Masukan font Oswald di bawah <head>

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

tambahkan kode dibawah ini di atas </head>

<link href='netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

GUNAKAN KODE DALAM POSTINGAN

<div style="text-align: center;">
<ul class="kotak-demo-download">
<!-- Demo -->
<li><a class="demo" href="http://yoga-tc.blogspot.com/" target="_blank"><i class="icon-chevron-right"></i> Demo</a></li>
<!-- Download -->
<li><a class="download" href="http://yoga-tc.blogspot.com/" target="_blank"><i class="icon-download-alt"></i> Download</a></li>
</ul>
</div>
<div class="clear">
</div>

Div content here

DEMO JOKO TOLE

Rabu, 29 Oktober 2014

Tombol Demo dan Download Blog Krizeer

Tidak ada komentar:

Posting Komentar