Tombol CSS

Belajar cara mengatur gaya tombol menggunakan CSS.

Gaya tombol dasar

Contoh

.button {
  warna latar: #4CAF50; /* Hijau */
  border: none;
  warna: putih;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Coba Sendiri

Warna tombol

Gunakan background-color Atribut mengubah warna latar belakang tombol:

Contoh

.button1 {background-color: #4CAF50;} /* Hijau */
.button2 {background-color: #008CBA;} /* Biru */
.button3 {background-color: #f44336;} /* Merah */ 
.button4 {background-color: #e7e7e7; color: black;} /* Abu-abu */ 
.button5 {background-color: #555555;} /* Hitam */

Coba Sendiri

Ukuran tombol

Gunakan font-size Atribut mengubah ukuran huruf tombol:

Contoh

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Coba Sendiri

Gunakan padding Atribut mengubah padding dalam tombol:

Contoh

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Coba Sendiri

Tombol rounded

Gunakan border-radius Atribut menambahkan lingkaran rounded pada tombol:

Contoh

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {radius batas: 12px;}
.button5 {radius batas: 50%;}

Coba Sendiri

Batas warna tombol berwarna

Gunakan border Gunakan properti untuk menambahkan batas berwarna tombol:

Contoh

.button1 {
  warna latar: putih;
  warna: hitam;
  batas: 2px solid #4CAF50; /* Hijau */
}
...

Coba Sendiri

Tombol yang dapat tergelincir


Gunakan :hover Pemilihan penampung dapat mengubah gaya tombol.

Petunjuk:Gunakan durasi transisi Gunakan properti untuk menentukan kecepatan efek "tergelincir":

Contoh

.button {
  durasi transisi: 0.4s;
}
.button:hover {
  warna latar: #4CAF50; /* Hijau */
  warna: putih;
}
...

Coba Sendiri

Tombol bayangan

Gunakan bayangan Gunakan properti untuk menambahkan bayangan tombol:

Contoh

.button1 {
  bayangan: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
  bayangan: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Coba Sendiri

Tombol yang disediakan

Gunakan kekeruhan Gunakan properti kekeruhan untuk menambahkan kekeruhan tombol (membuat penampilan "disedihkan").

Petunjuk:Anda juga dapat menambahkan properti dengan nilai "tidak diizinkan" cursor Properti, saat Anda menaruh kursor di atas tombol, properti ini akan menampilkan "tanda parking terlarang" (tanda parkir terlarang):

Contoh

.disabled {
  kekeruhan: 0.6;
  cursor: tidak diizinkan;
}

Coba Sendiri

Lebar tombol


Secara default, ukuran tombol tergantung pada konten teksnya (sama dengan lebar konten). Gunakan lebar Gunakan properti untuk mengubah lebar tombol:

Contoh

.button1 {lebar: 250px;}
.button2 {lebar: 50%;}
.button3 {lebar: 100%;}

Coba Sendiri

Pengelompokan tombol

　

Hapus margin luar dan tambahkan properti ke setiap tombol float:leftuntuk menciptakan grup tombol:

Contoh

.button {
  float: left;
}

Coba Sendiri

Grup Tombol dengan Garis

　

Gunakan border Atur properti untuk menciptakan grup tombol dengan garis:

Contoh

.button {
  float: left;
  border: 1px solid green;
}

Coba Sendiri

Grup Tombol Vertikal

Gunakan display:block Gantikan float:left Golongkan tombol vertikal, bukan berurut:

Contoh

.button {
  display: block;
}

Coba Sendiri

Tombol di Gambar

Kopi

Coba Sendiri

Tombol Animate

Contoh 1

Tambahkan panah saat mouse hover:

Coba Sendiri

Contoh 2

Tambahkan efek 'tekanan tombol' saat diklik:

Coba Sendiri

Contoh 3

Penyempitan saat mouse hover:

Coba Sendiri

Contoh 4

Tambahkan efek 'gelombang' saat diklik:

Coba Sendiri