Khởi động nút css

Mỗi trang web, blog của chúng ta nên có một số nút, nút chuyển liên kết và đây là một trong những nút mẫu mà tôi khá thích. Mẫu nút css này được tôi lấy mã màu từ bộ nút mặc định trong bootstrap 3. Vì tôi không muốn đính kèm liên kết với plugin bootstrap nên tôi sẽ hướng dẫn các bạn tạo ra bộ nút kiểu bootstrap này đơn giản với css.

Button Bootstrap CSS Style - Bộ button cho từng web, blog

HTML

Đầu tiên các bạn hãy tạo ra các thẻ html có thuộc tính class như bên dưới. Ở đây tôi sẽ tạo ra 6 màu với 4 kích thước khác nhau

Button DF
Button Blu
Button Green
Button Sky
Button Red
Button Orange

CSS

Tạo ra button mặc định với thuộc tính .btn

.btn,
a.btn {
  text-decoration:none;
  display:inline-block;
  padding:6px 12px;
  margin-bottom:0;
  font-size:14px;
  font-weight:400;
  line-height:1.42857143;
  text-align:center;
  white-space:nowrap;
  vertical-align:middle;
  -ms-touch-action:manipulation;
  touch-action:manipulation;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  background-image:none;
  border:1px solid transparent;
  border-radius:4px;
}

Và btn sẽ là class mặc định khi chúng ta gọi ra.
Bây giờ các bạn tạo màu lần lượt cho mỗi button.

.btn-df,a.btn-df {
  color:#333;
  background-color:#fff;
  border-color:#ccc;
}
.btn-blu,
a.btn-blu {
  color:#fff;
  background-color:#337ab7;
  border-color:#2e6da4;
}
.btn-green,
a.btn-green {
  color:#fff;
  background-color:#5cb85c;
  border-color:#4cae4c;
}
.btn-sky,
a.btn-sky {
  color:#fff;
  background-color:#5bc0de;
  border-color:#46b8da;
}
.btn-orange,
a.btn-orange {
  color:#fff;
  background-color:#f0ad4e;
  border-color:#eea236;
}
.btn-red,
a.btn-red {
  color:#fff;
  background-color:#d9534f;
  border-color:#d43f3a;
}

Chúng ta đã có 6 màu cho mỗi nút và giờ hãy làm cho nó cá tính hơn với hiệu ứng. hover when rê chuột vào button.
______3
Tiếp theo hãy thêm hiệu ứng. đang hoạt động khi nhấp vào nút, chúng tôi sẽ thực hiện cho nút có cảm giác được ấn xuống với thuộc tính hộp-bóng.
______4
Nếu bạn cần thêm một số kích thước lớn hơn hoặc nhỏ hơn cho nút, hãy thêm tiếp css sau.

.btn-xs,a.btn-xs {
  padding:1px 5px;
  font-size:12px;
  line-height:1.5;
  border-radius:3px;
}
.btn-sm,
a.btn-sm {
  padding:5px 10px;
  font-size:12px;
  line-height:1.5;
  border-radius:3px;
}
.btn-lg,
a.btn-lg {
  padding:10px 16px;
  font-size:18px;
  line-height:1.3333333;
  border-radius:6px;
}

Trong đó.
btn-xs. là kích thước nhỏ nhất
btn-sm. kích thước nhỏ (nhỏ)
btn-lg. kích thước lớn
Mỗi khi bạn cần một nút, hãy gán các lớp với giá trị tương ứng.
btn + color + size
Ví dụ.

Button Orange

Và chúng ta có 6 màu.
btn-df. default default
btn-blu color. màu xanh
btn-green. cây lá xanh
btn-sky. xanh da trời
btn-cam. cam
btn-màu đỏ. đỏ

Vui lòng ghi nhận bên dưới nếu có thắc mắc.

Chúc các bạn thành công.