Nút (Button)
Ví dụ một nút của Bootstrap, class là btn-default
.
Bình thường
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
Rê chuột lên (:hover
)
Rê chuột lên để xem kết quả.
.btn-default:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; }
Đang bấm (:active
)
.btn-default:active { color: #333; background-color: #e6e6e6; border-color: #adadad; }
Vừa mới bấm (:focus
)
.btn-default:focus { color: #333; background-color: #e6e6e6; border-color: #8c8c8c; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
Bạn cần CSS đủ 4 trạng thái để cho trải nghiệm tốt nhất.
Liên kết
Đối với liên kết, bạn chỉ cần quan tâm 3 trạng thái.
Bình thường
a { color: #337ab7; text-decoration: none; }
Rê chuột lên (:hover
)
a:hover { color: #23527c; }
Vừa mới bấm (:focus
)
a:focus { text-decoration: underline; }
Hoặc :hover
và :focus
bạn cũng có thể để chung với nhau thành một style duy nhất.
a:hover, a:focus { color: #23527c; text-decoration: underline; }
Textbox
Bạn chỉ cần quan tâm trạng thái bình thường và :focus
của Textbox, đó là khi đưa con trỏ chuột vào để nhập dữ liệu. Ví dụ Textbox của Bootstrap, class là form-control
.
Bình thường
.form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
Nhập dữ liệu (:focus
)
.form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); }
Chúc các bạn thành công!