Reset Button style về mặc định bằng CSS

CSS cho phép bạn tùy biến rất mạnh style của các phần tử. Tuy nhiên, đối với 1 số phần tử được tạo style mặc định như button thì sẽ làm khó bạn.

Đã bao nhiêu lần bạn nghĩ cho mình một cái gì đó như thế này?

‘Mình thích tạo các phần tử <div> với thuộc tính button, ước gì có các npm package để cài đặt ngay giúp mình thực hiện công việc về các sự kiện bàn phím và focus.’

Đừng có ước nữa, bởi vì mình có tin tức tốt cho bạn. Có một phần tử gốc được gọi là <button> và hôm nay mình ở đây để nói với bạn về nó.</button>

Một số điều cần biết về phần tử button và cách reset button style.

Một <button> cung cấp cho bạn mọi thứ bạn muốn bên ngoài.

  • Nó là phần tử thu hút sự chú ý
  • Nếu bạn thêm một sự kiện nhấp chuột onclick, bạn sẽ nhận được các sự kiện bàn phím.
  • Một trình đọc màn hình sẽ thông báo cho nó một cách thích hợp
  • Chức năng chính của nó không làm phân chia nội dung, button thực sự là một yếu tố tương tác

Trên hết, nó được trình duyệt hỗ trợ sẵn.

Tuy nhiên, rất khó để tạo style cho button mặc định trong HTML5

Điều gì sẽ xảy ra nếu mình nói với bạn rằng: “Chỉ cần một vài dòng CSS mình sẽ làm cho nó trông giống như một phần tử tiêu chuẩn?”

Đây…

button {
    display: inline-block;
    border: none;
    margin: 0;
    padding: 0;
    font-family: sans-serif; /* Use whatever font-family you want */
    font-size: 1rem;
    line-height: 1;
    background: transparent;
    -webkit-appearance: none;
}

Sau khi xong bước này thì bạn muốn vẽ vời button kiểu gì cũng được.

Khá gọn gàng nhỉ? Bạn muốn xem nó trong thực tế không? Không cần các bước xây dựng, bạn của mình chỉ sử dụng một số HTML và CSS.

Đây là bản Demo trong Codepen:

Nếu bạn là người thích sử dụng JavaScript để tạo kiểu cho các phần tử của mình. Đây là một object mà bạn có thể sử dụng:

const buttonStyles = {
    'display': 'inline-block',
    'border': 'none',
    'margin': '0',
    'padding': '0',
    'font-family': 'sans-serif',
    'font-size': '1rem',
    'background': 'transparent',
    'line-height': '1',
    '-webkit-appearance': 'none'
};

Một vài điều lưu ý

Bạn rất dễ dàng khi sử dụng những phần tử có sẵn. Tuy chúng có thể gây khó khăn khi tạo kiểu, nhưng đây là sự đánh đổi là tối thiểu, đặc biệt là khi chúng sẽ giúp trải nghiệm người dùng tổng thể tốt hơn nhiều (bởi vì các phần tử mặc định đã được nghiên cứu kỹ về UX). Đừng làm người dùng đau khổ vì chỉ vì bạn cho rằng bạn thấy đúng.

Hãy luôn nhớ mục tiêu của bạn là làm hài lòng người dùng.