Bagaimana untuk membuat: tombol teks

Bagaimana mengatur gaya teks tombol

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>

Langkah kedua - Tambahkan CSS:

Untuk mendapatkan penampilan 'butang teks', kami menghapus warna latar belakang asal dan sempadan:

.btn {
  sempadan: tak ada;
  warna-latar-belakang: warisan;
  ketinggian: 14px; lebar: 28px;
  saiz tulisan: 16px;
  kursor: pointer;
  display: inline-block;

/* Pada masa diudarakan */
.btn:hover { latar belakang: #eee;}
.success { warna: hijau;}
.info { warna: biru laut;}
.warning { warna: jeruk api;}
.danger { warna: merah;}
.default { warna: hitam;}

Coba sendiri

Butang teks dengan latar belakang khusus:

Tekan butang teks dengan warna latar belakang khusus semasa diudarakan:

.btn {
    sempadan: tak ada;
    warna-latar-belakang: warisan;
    ketinggian: 14px; lebar: 28px;
    saiz tulisan: 16px;
    kursor: pointer;
    display: inline-block;

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

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

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

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

/* jeruk api */
.warning {
    warna: jeruk api;

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

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

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

/* warna kelabu */
.default {
    warna: hitam;

.default:hover {
    background: #e7e7e7;

Coba sendiri

Halaman yang berhubungan

Panduan:Tombol CSS