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.