Membuat Tombol Button Keren pada Blogspot

Polwan cantik

Membuat Tombol Button Keren pada Blogspot .- Lama sudah saya tidak menulis sesuatu di blog ini. Karena waktu saya habis untuk urusan di dunia nyata, dan urusan maya sedikit di anak tirikan. Kali ini saya akan mengulas sedikit tutorial yang tidak begitu penting. Tapi saya yakin sebagian dari anda akan membutuhkannya, terlebih ketika temen-temen mempunyai blog yang ada link downloadnya.

Sekarang kita akan belajar bersama Membuat Tombol Button Keren pada Blogspot . dan perlu diketahui pada tulisan ini kita akan memanfaatkan CSS. Karena selain ringan tampilannya juga tidak kalah menarik dengan racikan lainnya. Perlu sekali Membuat Tombol Button Keren pada Blogspot, sebab ini akan mempercantik blog anda. Jika anda terbiasa menggunakan tombol gambar, mulailah ubah pikiran seperti ini. Karena bagaimanapun gambar lebih berat ketika di akses ketimbang CSS.

Okey, saya selalu memakai langkah –langkah . kita mulai dari pertama kita ketik beberapa baris atau salah satu sintak HTML seperti di bawah ini pada postingan anda atau pada setiap kali anda ingin menggunakan tombol :

<button class=" ">Default</button> <br/><br/>
<button class=" ">Primary</button> <br/><br/>
<button class=" ">Success</button> <br/><br/>
<button class=" ">Info</button> <br/><br/>
<button class=" ">Danger</button> <br/><br/>
<button class=" ">Warning</button> <br/><br/>

Tampilannya :

Cari kode </b:skin> kemudia kita membuat class CSSnya seperti di bawah, dan taruh kode CSS di bawah tepat di atas <b:skin> :

.btn {
font-weight: 500;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid transparent;
-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
-moz-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09);
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
color: #666;
}

Kemudian setelah kita bikin class CSSnya yaitu class .btn ,selanjutnya kita panggil class .btn pada HTML yang sudah kita buat sebelumnya. INGAT ..!! manggilnya gak pake titik ya alias langsung aja ketik btn. Makan kan seperti di bawah ini

<button class="btn ">Default</button> <br/><br/>
<button class="btn ">Primary</button> <br/><br/>
<button class="btn ">Success</button> <br/><br/>
<button class="btn ">Info</button> <br/><br/>
<button class="btn ">Danger</button> <br/><br/>
<button class="btn ">Warning</button> <br/><br/>

Tampilannya :

Selanjutnya bikin class masing-masing kegunaanya. ada class primary, success, info, danger, warning kemudian tambahkan di bawah class .btn atau di atas kode <b:skin>

.primary {
color:#fff;
background-color: #3c8dbc;
border-color: #367fa9;
}
.success {
color:#fff;
background-color: #00a65a;
border-color: #008d4c;
}
.info {
color:#fff;
background-color: #00c0ef;
border-color: #00acd6;
}
.danger {
color:#fff;
background-color: #f56954;
border-color: #f4543c;
}
.warning {
color:#fff;
background-color: #f39c12;
border-color: #e08e0b;
}

Setelah class sudah jadi , kita panggil lagi di HTMLnya maka akan jadi seperti ini:

<button class="btn ">Default</button> <br/><br/>
<button class="btn primary">Primary</button> <br/><br/>
<button class="btn success">Success</button> <br/><br/>
<button class="btn info">Info</button> <br/><br/>
<button class="btn danger">Danger</button> <br/><br/>
<button class="btn warning">Warning</button> <br/><br/>

Tampilannya

Setelah seperti di atas, maka langkah kita sudah hampir selesai. Tahap selanjutnya memberi kesan agar tombol tersebut hidup. Yaitu ketika mouse di atas atau di lewat mouse button tersebut berubah warna.

.primary:hover, .primary:active {
background-color: #367fa9;
}
.success:hover, .success:active {
background-color: #008d4c;
}
.info:hover, .info:active {
background-color: #00acd6;
}
.danger:hover, .danger:active {
background-color: #f4543c;
}
.warning:hover, .warning:active {
background-color: #e08e0b;
}

Tampilannya :

Terahir agar terlihat keren anda bisa menambahkan animasi. Agar ketika button di lewati mouse efek yang di timbulkan terlihat keren.

.btn {
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
}

Tampilannya :

Atau yang lebih keren lagi kita coba buat animasi pake keyframe

@-webkit-keyframes inibudi-nJedul {
0% {
-webkit-transform: scale(1);
}
25% {
-webkit-transform: scale(.8);
}
50% {
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes inibudi-nJedul {
0% {
-moz-transform: scale(1);
}
25% {
-moz-transform: scale(.8);
}
50% {
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes inibudi-nJedul {
0% {
-o-transform: scale(1);
}
25% {
-o-transform: scale(.8);
}
50% {
-o-transform: scale(1.05);
}
70% {
-o-transform: scale(.9);
}
100% {
-o-transform: scale(1);
}
}
@keyframes inibudi-nJedul {
0% {
transform: scale(1);
}
25% {
transform: scale(.8);
}
50% {
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.btn:hover {
-webkit-animation: inibudi-nJedul 0.7s ease-in-out;
-moz-animation: inibudi-nJedul 0.7s ease-in-out;
-o-animation: inibudi-nJedul 0.7s ease-in-out;
animation: inibudi-nJedul 0.7s ease-in-out;
}

Tampilannya :

Ketika kita ingin menaruh link pada tombol yang kita buat tadi kita cukup ketik HTMLnya saja

<a href=”http://id-inibudi.blogspot.com”><button class="btn warning">Situs Orang Ganteng</button> <br/><br/></a>

Tampilannya :

demikian kita sudah belajar bersama cara Membuat Tombol Button Keren pada Blogspot . semoga bermanfaat untuk teman-teman semua.

Salam Blogger IndonesiaBudi Hantomo

Membuat Tombol Button Keren pada Blogspot

Share this