Cara Membuat Button Cantik Dengan CSS. Berikut ini salah satu contoh penggunaan CSS untuk mempercantik Button atau tombol pada halaman HTML kamu.
Ini merupakan dasar dari penggunaan CSS pada button, kamu dapat memodifikasi dan mengatur sesuai dengan selera yang di inginkan.
Untuk lebih memahami script ini, kamu harus memperhatikan class yang digunakan setiap tombol yang ada, setiap tombol memiliki class yang berbeda dan menghasilkan warna yang berbeda pula
Sedangkan isi dari class telah di set sebelumnya dalam tag di dalam tag itulah CSS dapat aktif dan memberikan hasil pada button sesuai dengan class yang di atur di dalamnya.
Ini merupakan dasar dari penggunaan CSS pada button, kamu dapat memodifikasi dan mengatur sesuai dengan selera yang di inginkan.
Untuk lebih memahami script ini, kamu harus memperhatikan class yang digunakan setiap tombol yang ada, setiap tombol memiliki class yang berbeda dan menghasilkan warna yang berbeda pula
Sedangkan isi dari class telah di set sebelumnya dalam tag di dalam tag itulah CSS dapat aktif dan memberikan hasil pada button sesuai dengan class yang di atur di dalamnya.
Silahkan gunakan Script berikut ini untuk membuat button cantik seperti diatas, lihat hasilnya. anda dapat mempraktekkannya langsung di W3SCHOOLS.
<!DOCTYPE html>
<html>
<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>
<body>
<h2>Button Colors</h2>
<p>Change the background color of a button with the background-color property:</p>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
Ada sebagian orang yang tidak memahami konsep dasar CSS ini, hasilnya ia akan sangat sulit untuk mengembangkan sebuah halaman sesuai dengan yang di inginkan.
Baca Juga : Membuat Layout Website Menggunakan CSS
2 komentar
Write komentarthx
Replyinfonya bermanfaat
hihi Terimasih sudah mampir...
ReplyKomentar untuk bertanya, memberikan masukan, atau saran. saya akan memalas pesan anda segera EmoticonEmoticon