Bình thường, khi làm CSS cho Liên kết hoặc nút, bạn chỉ quan tâm đến trạng thái :hover. Nhưng để đầy đủ, bạn cũng cần quan tâm đến các trạng thái khác để trải nghiệm của người dùng được hoàn hảo hơn.

Các trạng thái cơ bản của Textbox, Nút và Liên kết

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: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!