Cara Membuat Text Button

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 29, 2021

Di bawah ini kita akan mempelajari cara mengatur gaya tombol teks dengan CSS.

Section Artikel

1 Text Button
2 Cara Menata Text Button
3 Text Button dengan Background Individual

Text Button

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

.btn:hover {background: #eee;}

.success {color: green;}
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}
</style>
</head>
<body>

<h2> Contoh Text Buttons Tanpa Warna Background</h2>

<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>

</body>
</html>

Cara Menata Text Button

Langkah 1) Tambahkan HTML:
Contoh

<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 2) Tambahkan CSS:
Untuk mendapatkan tampilan “Text Button”, kita akan menghapus warna background dan border:

Contoh

.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

/* saat mouse digerakkan */
.btn:hover {background: #eee;}

.success {color: green;}
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}

Text Button dengan Background Individual

Tombol teks dengan warna background akan muncul saat mengarahkan kursor ke button:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

/* Green */
.success {
  color: green;
}

.success:hover {
  background-color: #4CAF50;
  color: white;
}

/* Blue */
.info {
  color: dodgerblue;
}

.info:hover {
  background: #2196F3;
  color: white;
}

/* Orange */
.warning {
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

/* Red */
.danger {
  color: red;
}

.danger:hover {
  background: #f44336;
  color: white;
}

/* Gray */
.default {
  color: black;
}

.default:hover {
  background: #e7e7e7;
}
</style>
</head>
<body>

<h2>Text Buttons</h2>
<p>Text Buttons dengan warna latar tertentu saat mengarahkan kursor: </p>

<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>

</body>
</html>

.btn {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}

/* Hijau */
.success {
    color: green;
}

.success:hover {
    background-color: #4CAF50;
    color: white;
}

/* Biru */
.info {
    color: dodgerblue;
}

.info:hover {
    background: #2196F3;
    color: white;
}

/* Orange */
.warning {
    color: orange;
}

.warning:hover {
    background: #ff9800;
    color: white;
}

/* Merah */
.danger {
    color: red;
}

.danger:hover {
    background: #f44336;
    color: white;
}

/* Abu-Abu */
.default {
    color: black;
}

.default:hover {
    background: #e7e7e7;
}