Customize Button styles with CSS

Button là một thành phần vô cùng quan trọng trên bất kỳ một website hay ứng dụng nào. Tùy vào ý đồ design, màu sắc thương hiệu mà các button trên mỗi ứng dụng sẽ có hình hài khác nhau.

Trong bài viết này mình sẽ chia sẻ với các bạn các yếu tố cơ bản liên quan tới 1 button để từ đó các bạn có thể tự tạo một button mang style riêng của các bạn với đầy đủ các hiệu ứng cần thiết.

Button

.i-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  border-radius: 8px;
  padding: 0 24px;
  white-space: nowrap;
  font-size: 16px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  outline: 0;
  cursor: pointer;
  border: 1px solid transparent;
}
.i-btn-primary {
  color: white;
  background-color: #4285f4;
  border-color: #4285f4;
}

Ở trong video ví dụ của mình đơn giản hơn nhiều so với đoạn code ở phía trên. Mục đích ban đầu mình dự định làm đơn giản nhưng khi giải thích trong video thì khá dài mà chỉ mới được những cái căn bản. Nếu nói hết cái đống thuộc tính này thì video quá dài và không còn căn bản nữa rồi nên mình quyết định làm đơn giản trong video và sẽ làm 1 video khác chi tiết hơn.

Bài này mình tập trung vào các sự kiện khi chúng ta tương tác với cái button để mọi người hiểu và vận dụng trong quá trình code.

:hover

Trạng thái hover là trạng thái khi chúng ta đưa con trỏ chuột lên trên cái button.

.i-btn-primary:hover {
  background-color: #327bf3;
  border-color: #327bf3;
}

ví dụ trên mình sẽ thay đổi màu background của button khi hover. Ngoài ra mình cũng thay đổi màu của border trùng với màu của background.

:active

Active là trạng thái mà khi chúng ta nhấn vào button nhưng chưa thả con chuột ra. Tức là chúng ta nhấn chuột xuống vào cái nút cần nhấn nhưng giữ cái trạng thái nhấn đó mà chưa thả con chuột ra. Khi chúng ta thả chuột ra nếu con chuột vẫn nằm trên button thì hiệu ứng sẽ quay về :hover. Còn con chuột move ra ngoài rồi và chúng ta thả tay thì button sẽ quay về trạng thái bình thường.

.i-btn-primary:active {
  background-color: #327bf3;
  border-color: #327bf3;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.5);
}

:focus

Trạng thái focus là trạng thái khi các bạn nhấn vào button, thả chuột ra luôn rồi, nhưng bạn chưa click vào bất cứ chỗ nào khác. Khác với cái :active là active thì bạn vừa thả chuột ra là nó mất còn focus thì bạn phải nhấn vào chỗ nào đó khác nó mới trả về trạng thái mặc định.

Chỗ focus và active này mình có nói khá rõ trong video các bạn có thể xem video để hiểu hơn nhé.

.i-btn-primary:focus {
  background-color: #327bf3;
  border-color: #327bf3;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.5);
}

:disabled

Trạng thái này các bạn sẽ phải thêm ‘disabled’ vào button ở code html. Chúng ta làm điều này khi chúng ta muốn người dùng không thể click vào nút này nữa. có click vào thì nó cũng ko có điều gì xảy ra.

Ví dụ trong trường hợp cái nút này là nút submit. Thường khi chúng ta nhấn submit hệ thống sẽ phải xử lý và chúng ta phải disabled cái button submit đi để người dùng không thể nhấn thêm nữa. Vì người dùng nhấn thêm vài lần thì hàm xử lý khi submit sẽ bị gọi nhiều lần dẫn tới kết quả không như chúng ta mong đợi.

<button class="i-btn i-btn-outline" disabled>
  Submit
</button>

.i-btn-primary:disabled {
  background-color: #92b9f9;
  border-color: #92b9f9;
  cursor: default;
}

Lời kết

Hiểu về các sự kiện của button cộng với chúng ta có kiến thức css các thuộc tính khác chúng ta sẽ custom được một button theo ý mình một cách dễ dàng.

Vì mình không muốn video quá dài nên ở trong phạm vi video nếu các bạn chưa hiểu điều gì các bạn có thể hỏi ngay bên dưới phần comment. Mình sẽ nhiệt tình giải thích nhé.