Cara Membuat Button Bagus Dengan CSS

Cara Membuat Button Bagus Dengan CSS - Pada kesempatan kali ini kita akan membahas seputar CSS yaitu cara membuat button bagus dengan CSS,Sebelum ke materi kita harus ketahui dulu apa itu CSS? mungkin disini ada yang tahu dan juga belum tahu, maka dari itu yang belum tahu saya akan menjelaskannya lebih lanjut dibawah ini.

Pengertian CSS

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

nah selanjutnya kita akan lanjut ke materi yaitu "Cara Membuat Button Bagus Dengan CSS" berikut saya akan menjelaskan tutorialnya, tutorial ini sangat mudah untuk praktekan dan dipahami, lebih lengkap silahkan ikuti langkah-langkah berikut ini.

Kode Button Style CSS

 <style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ </style>

Catatan :

Terlebih dahulu kita letakan kode diatas sebagai style css, cara meletakan kode <style> setelah tag <head> atau <body> contoh :
<head>

<style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ </style>

</head>

atau

<body>

<style> .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button2 {background-color: #008CBA;} /* Blue */ .button3 {background-color: #f44336;} /* Red */ .button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 {background-color: #555555;} /* Black */ </style>

</body>

Kode Button CSS

<a href="http://tornesia.blogspot.com/"><button class="button">Hijau</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button2">Biru</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button3">Merah</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button4">Abu-Abu</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button5">Hitam</button></a>

Contoh Demo Kode Button CSS dengan Style :

Catatan :

Letakan kode Button CSS diatas setelah tag <body> dan sebelum </body> sebagai contoh :

<body>

<a href="http://tornesia.blogspot.com/"><button class="button">Hijau</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button2">Biru</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button3">Merah</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button4">Abu-Abu</button></a>
<a href="http://tornesia.blogspot.com/"><button class="button button5">Hitam</button></a>

</body>

Anda juga bisa mengganti link tujuan sesuai keinginan anda caranya ganti dibagian href="link web kamu"> selesai deh.

Nah mungkin cukup sekian penjelasan mengenasi CSS yaitu cara membuat button bagus dengan CSS, semoga apa yang kami sampaikan ini bermanfaat bagi anda dan menjadi bahan pembelajaran anda dalam koding. Sebelumnya saya mohon maaf apabila ada kata yang kurang dimengerti, apabila anda belum mengerti silahkan tanyakan saja lewat komentar dibawah postingan ini. Sekian terima kasih.