Làm thế nào để tạo: nút viền

Làm thế nào để thiết kế phong cách nút viền?

Bước 1 - Thêm HTML:

<button class="btn success">Thành công</button>
<button class="btn info">Thông tin</button>
<button class="btn warning">Cảnh báo</button>
<button class="btn danger">Nguy hiểm</button>
<button class="btn default">Mặc định</button>

Bước 2 - Thêm CSS:

.btn {
  vành đai: 2px vững chắc đen;
  màu nền: trắng;
  màu: đen;
  khoảng cách: 14px 28px;
  cỡ chữ: 16px;
  con trỏ: chỉ thị;
}
/* Màu xanh lục */
.success {
  màu viền: #04AA6D;
  màu: xanh lục;
}
.success:hover {
  màu nền: #04AA6D;
  màu: trắng;
}
/* Màu xanh */
.info {
  màu viền: #2196F3;
  màu: xanh lá cây;
}
.info:hover {
  background: #2196F3;
  màu: trắng;
}
/* Cam */
.warning {
  màu viền: #ff9800;
  màu: cam;
}
.warning:hover {
  background: #ff9800;
  màu: trắng;
}
/* Màu đỏ */
.danger {
  màu viền: #f44336;
  màu: đỏ
}
.danger:hover {
  background: #f44336;
  màu: trắng;
}
/* Màu xám */
.default {
  màu viền: #e7e7e7;
  màu: đen;
}
.default:hover {
  background: #e7e7e7;
}

Thử ngay

thêm border-radius Thuộc tính để tạo nút góc tròn:

.btn {
  border-radius: 5px;
}

Thử ngay

Trang liên quan

Hướng dẫn:Nút CSS