Bạn cảm thấy mình đã quay trở lại với trường F8 và chào mừng đến với phần thực hành tiếp theo của chuỗi bài về tiêu chuẩn BEM. Video này sẽ hướng dẫn bạn cách tạo ra những button đẹp và đa dạng bằng CSS. Tuy nhiên, video này sẽ kết hợp hai mục đích. Một là hướng dẫn bạn cách áp dụng phần mềm để xin phép cho bất cứ thẻ nào trong HTML. Hai là hướng dẫn bạn làm sao để tạo ra các button chuẩn và dễ dàng tái sử dụng, không chỉ là ví dụ đơn giản mà thực sự là kinh nghiệm hữu ích của tôi. Bây giờ chúng ta hãy nhìn vào thiết kế mà tôi đã tìm thấy trên trang Triple nhé. Trong video, chúng ta chỉ quan tâm đến 3 màu chính của 3 trạng thái, xanh lá cây cho thành công, cam cho cảnh báo và đỏ cho thất bại. Nếu bạn đã nhớ bài trước khi bạn tạo thành phần blog của mình, nó sẽ chưa có màu sắc. Bạn có thể thể hiện màu xanh cho thành công bằng cách thêm class tương ứng vào modify và đặt màu nền là xanh. Tương tự, bạn có thể làm với hai mục còn lại.
Đầu tiên, chúng ta sẽ tạo 3 button đặc biệt. Ở đây, tôi chỉ đặt tên class là “btn”. Nhưng để tạo cái gì đó đặc biệt, hãy thêm chữ vào xem. Dưới đây là ví dụ về HTML:
<button class="btn btn--success">Thành công</button>
<button class="btn btn--warning">Cảnh báo</button>
<button class="btn btn--danger">Thất bại</button>Nếu bạn muốn thể hiện button thành công với màu xanh, bạn chỉ cần thêm class tương ứng vào modify và đặt background màu xanh:
.btn--success {
background-color: green;
}Tương tự, bạn có thể làm với hai mục còn lại. Bây giờ, chúng ta đã có các button với các trạng thái mặc định. Đây chỉ là ví dụ đơn giản, bạn có thể tạo ra nhiều loại button khác nếu muốn.
Cách trên không phải lúc nào cũng phù hợp, đôi khi chúng ta sẽ sử dụng một hệ thống khác. Ở ba trạng thái trên, chúng ta có thể áp dụng từng thẻ một để loại bỏ những vấn đề của từng trạng thái đó. Vấn đề phải biết vị thế này là chúng ta sẽ bắt đầu từ thẻ cha để loại bỏ những vấn đề của từng thẻ. Ví dụ, nếu bạn sử dụng 3 button, thông thường bạn sẽ nghĩ rằng Ông Đạt chuyển hàng nhanh, vậy giờ đang ở trên một hàng dọc. Nhưng bây giờ bạn đi sửa để cho mình đầu tiên là đi chỉnh cho cái thằng Block. Cái thằng BEM này là chúng có bóp ở trong mà chỉ thêm giúp mình cái bitplay là bằng iblog và để loại bỏ cái vấn đề của thẻ cha. Đây là bước đầu tiên, sau đó thêm cái thằng A là thêm cả đẹp à à
Bạn có một vấn đề là chữ bị chồng lên cái thuộc tính bằng intelite. Thì bạn sẽ bỏ thì đẩy ra và thêm vào cái thẻ BEM là thêm cả dbhf. Bây giờ các bạn đã xử lý được cả ba trạng thái nhé. Bây giờ, bạn sẽ đi ghép những thành phần chung lại, tốt nhất là đi thêm những modifier vào để chúng ta nhìn được thành phần chung. Ở đây là ví dụ:
<div class="container">
<button class="btn btn--success">Thành công</button>
<button class="btn btn--warning">Cảnh báo</button>
<button class="btn btn--danger">Thất bại</button>
</div>Ừ rồi bây giờ mình sẽ biết có ở bên này. Mở trình duyệt và nếu bạn không thấy màu như thế này, thì hãy nhấp vào nút refresh. Nếu bạn vẫn không thấy, hãy tự gõ vào đây là <link rel="stylesheet" href="reset.css">. Ở đây, reset.css nói rằng mọi thẻ đều có margin và padding là 0, ngoại trừ <table>. Bạn chỉ cần thêm nó vào để tạo ra cái button. Tiếp theo là cách định kích thước của nút này. Thông thường, người ta sử dụng chiều cao 32px cho nút nhỏ, 48px cho nút vừa và 56px cho nút lớn. Bạn có thể tự điều chỉnh theo ý thích. Ví dụ, để tạo một nút nhỏ, bạn có thể thêm modifier như sau:
<button class="btn btn--small">Nút nhỏ</button>Ở đây, class “btn–small” có kích thước 32px. Tương tự, bạn có thể làm với nút vừa và lớn. Bây giờ, hãy thử điều chỉnh kích thước của nút này nhá. Thay đổi giá trị width từ 32px thành 40px, bạn sẽ nhận thấy nút nhỏ này tăng lên một chút. Tương tự, bạn có thể thay đổi lên 56px để tạo nút lớn hơn.
Cuối cùng, chúng ta sẽ tạo trạng thái disable. Trạng thái này có nghĩa là nút không thể bấm vào. Thông thường, chúng ta sẽ làm cho nút mờ đi nhưng vẫn giữ nguyên kích thước của nó. Tuy nhiên, trong trường hợp này, bạn muốn nút trở nên nhỏ hơn. Vì vậy, hãy giảm kích thước của nút này bằng một nửa và bạn sẽ nhìn thấy nó trở nên nhỏ hơn và không thể bấm vào nữa. Sao bạn thấy nó có vẻ đẹp không? Thêm một cái biểu tượng của disable vào đó là hình cái khiên gạch chéo. Mình nghĩ không cần thiết, hãy giữ nó đơn giản như thế này là đẹp hơn nha.
Vậy là chúng ta đã có các button với các trạng thái và kích thước khác nhau. Bài hôm nay đã xong rồi nhé. Tôi hy vọng bạn đã học được cách làm cho button dễ dàng tùy biến và sử dụng trong thực tế. Đừng quên, khi bạn cần thay đổi màu khác, hãy tự đặt thêm modifier và điều chỉnh theo ý muốn. Tới bài tiếp theo, chúng ta sẽ học về việc tạo các button lồng nhau. Hẹn gặp lại các bạn trong tương lai nhé!