Button Bootstrap CSS Style - Bộ button cho mỗi web, blog

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

Button Bootstrap CSS Style - Bộ button cho mỗi 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.

<a href="#" class="btn btn-df">Button DF</a>
<a href="#" class="btn btn-blu">Button Blu</a>
<a href="#" class="btn btn-green">Button Green</a>
<a href="#" class="btn btn-sky">Button Sky</a>
<a href="#" class="btn btn-red">Button Red</a>
<a href="#" class="btn btn-orange">Button Orange</a>

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 button và giờ hãy làm cho nó cá tính hơn với hiệu ứng :hover khi rê chuột vào button.

.btn-df:hover,a.btn-df:hover {
  color:#333;
  background-color:#E6E6E6;
  border-color:#ADADAD;
}
.btn-blu:hover,
a.btn-blu:hover {
  color:#fff;
  background-color:#286090;
  border-color:#204D74;
}
.btn-green:hover,
a.btn-green:hover {
  color:#fff;
  background-color:#449D44;
  border-color:#398439;
}
.btn-sky:hover,
a.btn-sky:hover {
  color:#fff;
  background-color:#46B8DA;
  border-color:#269ABC;
}
.btn-orange:hover,
a.btn-orange:hover {
  color:#fff;
  background-color:#EC971F;
  border-color:#D58512;
}
.btn-red:hover,
a.btn-red:hover {
  color:#fff;
  background-color:#C9302C;
  border-color:#AC2925;
}

Tiếp theo hãy thêm hiệu ứng :active khi click vào buton, chúng ta sẽ làm cho nút có cảm giác bị ấn xuống với thuộc tính box-shadow.

.btn.active,.btn:active,a.btn:active {
  background-image:none;
  outline:0;
  -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
}

Nếu bạn cần thêm một số size lớn hơn hoặc nhỏ hơn cho button thì 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à size nhỏ nhất
btn-sm : size nhỏ (small)
btn-lg : size lớn
Mỗi khi bạn cần một button hãy gán các class với giá trị tương ứng:
btn + màu + size
Ví dụ:

<a href="#" class="btn btn-orange btn-xs">Button Orange</a>

Và chúng ta có 6 màu:
btn-df : màu trắng mặc định
btn-blu : mày xanh
btn-green : xanh lá cây
btn-sky : xanh da trời
btn-orange : màu cam
btn-red : đỏ

Hãy nhận xét bên dưới nếu có thắc mắc.

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