Membuat Tombol Link Sederhana Dengan CSS

Sudah lama saya gak share tentang Tips Blogger karena beberapa hari ini saya cuma share artikel Umum seperti Berita Misteri, Game, dll pokoknya. Maklum saya kurang berpengalaman di Blogger karena saya baru jadi Blogger, jadi kurang terlalu paham tentang kode-kode pembangunnya, tetapi walaupun begitu, saya mencoba untuk belajar lebih giat lagi tentang kode-kode tersebut dengan melakukan Eksperimen-eksprimen Sederhana yang hanya melibatkan CSS dan HTML yang saya lakukan di lab Cssdeck saya.
Ok, ngomong soal Tombol link ini sebenarnya tidak berbeda dengan Link Biasa hanya saja tombol link ini lebih berwarna dan bervariasi jadi lebih kelihatan menarik, heheh.

Ok deh, kita langsung praktekan saja.
- Pertama, sobat masuk dulu ke Edit HTML
- Lalu cari Kode ]]></b:skin
- Masukan Kode ini diatas ]]></b:skin

.johny {background:#15b;color:#fff;text-shadow:1px 1px 1px #000;padding:5px 11px 5px 11px;text-decoration:none;border-radius:3px 3px;font:normal 12px arial;font-weight:599;box-shadow :inset 1px 2px 2px #1b6fee}
.johny:hover {background:#484848;color:#fff; box-shadow :inset 0 3px 3px #000;transition: all 800ms ease-in-out}
.johny2 {background:#B0130d;color:#fff;text-shadow:1px 1px 1px #000;padding:5px 11px 5px 11px;text-decoration:none;border-radius:3px 3px;font:normal 12px arial;font-weight:599;box-shadow :inset 1px 2px 2px #FF0000}
.johny2:hover {background:#484848;color:#fff; box-shadow :inset 0 3px 3px #000;transition: all 800ms ease-in-out}

Untuk supaya desainnya berfungsi, saat sobat ingin membuat link, sobat tinggal menambah sedikit kode.
Contoh :
<a class='johny' href='http://my-topsite.blogspot.com'>Johny</a>
Maka akan menjadi

Johny

<a class='johny2' href='http://my-topsite.blogspot.com'>Johny</a>
Maka akan menjadi

Johny

Selesai, saya harap artikel diatas bisa dimengerti.