Cara Membuat Tombol atau Button dengan CSS

Jumpa lagi Sobat, setelah beberapa hari ini mati lampu di daerah saya, maklum lagi musim angin nich, banyak pohon-pohon bertumbangan di pinggir jalan yang menimpa tiang listrik sehingga membuat jaringan listrik padam untuk beberapa hari (apa urusannya yaa...)

Setelah sebelumnya saya membuat artikel Cara Mudah Membuat Link di Blog, kini saya akan mencoba meneruskan artikel tersebut dengan menambahkan sedikit script agar tampilan link dapat lebih menarik dan terlihat profesional, yaitu membuat style pada link menjadi sebuah tombol atau button.

Sebelumnya kita lanjutkan saya ingin berterima kasih kepada Mas +Saud Karrysta yang telah berbagi ilmunya tentang bagaimana cara membuat link yang lebih baik dan lebih SEO Friendly pada artikel cara mudah membuat link di blog sebelumnya. 

Jika Sobat ingin menerapkannya pada blog yang Sobat kelola ikuti langkahnya berikut ini

Cara Membuat Tombol atau Button dengan CSS

• Login ke blogger
• Pilih menu Template
• Klik Edit HTML
• Cari kode script ]]></b:skin>
• Copy script berikut dan paste-kan tepat di atas kode ]]></b:skin>

a.button {

    background-color: #999999;

    color: #FFFFFF !important;

    cursor: pointer;

    display: inline-block;

    font-weight: bold;

    padding: 5px 8px;

    text-align: center;

    -webkit-border-radius: 5px;

    border-radius: 5px;

}

.button:hover {

    text-decoration: none;

    background-color: #000000;

}

Cara penulisannya adalah dengan menambahkan class button pada kode script link yang akan kita buat.

Contoh demo link dengan CSS di atas

<a class="button" href="http://www.blog-guns.com/2014/03/cara-mudah-membuat-link-di-blog.html" title=”Cara Mudah Membuat Link di Blog” target="_blank">Artikel Sebelumnya</a>

Demikianlah Cara Membuat Tombol atau Button dengan CSS, mudah-mudahan bermanfaat dan bila ada kekurangan mohon koreksinya. Terima kasih.