Bagaimana membuat: tombol teks

Bagaimana mengatur gaya tombol teks

Langkah pertama - Tambahkan HTML：

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>

Tahap kedua - Tambahkan CSS:

Untuk mendapatkan penampilan 'tombol teks', kami menghapus warna latar belakang dan batas default:

.btn {
  batas: tak ada;
  warna-latar-belakang: warisan;
  padding: 14px 28px;
  ukuran font: 16px;
  kursor: pointer;
  display: block-inline;

/* Pada saat diarahkan kursor */
.btn:hover {latar belakang: #eee;}
.success {warna: hijau;}
.info {warna: biru laut;}
.warning {warna: kuning;}
.danger {warna: merah;}
.default {warna: hitam;}

Coba sendiri

Tombol teks dengan latar belakang yang terpisah:

Tombol teks yang memiliki warna latar belakang spesifik saat diarahkan kursor:

.btn {
    batas: tak ada;
    warna-latar-belakang: warisan;
    padding: 14px 28px;
    ukuran font: 16px;
    kursor: pointer;
    display: block-inline;

/* Hijau */
.success {
    warna: hijau;

.success:hover {
    warna-latar-belakang: #04AA6D;
    warna: putih;

/* Biru */
.info {
    warna: biru laut;

.info:hover {
    latar belakang: #2196F3;
    warna: putih;

/* Kuning */
.warning {
    warna: kuning;

.warning:hover {
    latar belakang: #ff9800;
    warna: putih;

/* Merah */
.danger {
    warna: merah;

.danger:hover {
    latar belakang: #f44336;
    warna: putih;

/* Abu-abu */
.default {
    warna: hitam;

.default:hover {
    background: #e7e7e7;

Coba sendiri

Halaman yang berhubungan

Panduan:Tombol CSS