Bagaimana membuat: tombol kontur

Bagaimana merancang gaya tombol kontur?

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:

.btn {
  batas: 2px solid hitam;
  background-color: putih;
  warna: hitam;
  padding: 14px 28px;
  ukuran-font: 16px;
  cursor: pointer;

/* Hijau */
.success {
  warna-sorot: #04AA6D;
  warna: hijau

.success:hover {
  background-color: #04AA6D;
  warna: putih;

/* Biru */
.info {
  warna-sorot: #2196F3;
  warna: biru gelombang

.info:hover {
  background: #2196F3;
  warna: putih;

/* Orange */
.warning {
  warna-sorot: #ff9800;
  warna: kuning

.warning:hover {
  background: #ff9800;
  warna: putih;

/* Merah */
.danger {
  warna-sorot: #f44336;
  warna: merah

.danger:hover {
  background: #f44336;
  warna: putih;

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

.default:hover {
  background: #e7e7e7;

Coba sendiri

tambah border-radius Atribut untuk membuat tombol kontur bulat:

.btn {
  border-radius: 5px;

Coba sendiri

Halaman yang berhubungan

Panduan:Tombol CSS