Xin chào các bạn quay lại blog của mình. hôm nay chúng ta sẽ đi tìm hiểu các ví dụ về component button đẹp trong Bootstrap 4. Nào hãy cùng mình khám phá nhé Show
Những Ví Dụ Component Button Trong BootstrapTrong việc phát triển web ngoài việc chú ý vào việc phát triển bố cục trang web thì chúng ta còn phải quan tâm đến những yếu tố giúp trải nghiệm và tương tác với người dùng tốt hơn và một số trong đó là nút. Nó có thể chắc chắn nhận các nhiệm vụ khác nhau như gửi biểu mẫu, nhận thông báo. do đó hãy cùng mình đi vào tìm hiểu các nút đoạn trích để làm nổi bật cũng như tạo sức hút cho người dùng khi sử dụng trang web của chúng ta Thiết Kế Mạng Xã Hội Nút BootstrapĐây là một nút đa chức năng thu hút sự chú ý bằng chữ Hover me và khiến người dùng tò mò muốn biết sau nút đó là liên kết hay nội dung gì? . Để hiểu rõ hơn bạn xem đoạn mã sau nhé  Kết quả bạn xem bên dưới nhé Xem nút Bút 1(nguồn từ Joshua Ward) của haycuoilennao19 (@haycuoilennao19) trên CodePen Nguồn Design Bootstrap Button Group With IconNút này sử dụng bố cục cục bộ màu cơ bản và nổi bật hơn bằng màu nền đen, điểm nổi là đơn giản tối đa giúp người dùng hiểu chức năng của nút. Nếu bạn để ý sẽ thấy khi di chuột vào biểu tượng ở mỗi nút, ta sẽ có các chuyển động tương ứng với biểu tượng đó. Để hiểu rõ hơn bạn xem đoạn mã bên dưới nhé Kết quả bạn xem bên dưới nhé Xem nút Bút 2(nguồn từ David Darnes) của haycuoilennao19 (@haycuoilennao19) trên CodePen Nguồn Thiết Kế Flat UI ButtonNút này sử dụng bố cục cục bộ kết hợp một số yếu tố như độ sâu, đổ bóng, đường viền làm nổi bật, hút dẫn cho nút và tạo hiệu ứng giúp người dùng có cảm giác được nhấn nút y như thật. Nó cũng dễ dàng tùy chỉnh để phù hợp với trang web bằng cách thay đổi một số thuộc tính CSS. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé Kết quả bạn xem bên dưới nhé Xem Pen Flat UI Buttons 2 của Benjamin Gagne (@benngagne) trên CodePen Nguồn Cách Tạo Glass Button CSS3Nút này tạo cảm giác sáng và sang trọng hơn bằng cách tạo hiệu ứng cho nút như một bề mặt kính khi chúng ta di chuột vào nó. Và chúng ta cũng có thể chuyển đổi màu sắc tùy chọn cho các nút này để phù hợp với mục đích sử dụng. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé Kết quả bạn xem bên dưới nhé Xem Pen Chrome/Glass Buttons của James Holmes (@32bitkid) trên CodePen Nguồn Cách Tạo Hoạt ảnh Đường viền NútNút này sử dụng đường viền để tạo hiệu ứng bằng cách khi người dùng di chuột lên, đường viền sẽ thay đổi vị trí định vị làm cho nó giống như đang chuyển động, trở nên sống động hơn và giúp người dùng cảm giác thú vị khi thấy hiệu . Để hiểu rõ hơn bạn xem đoạn mã sau nhé Kết quả bạn xem bên dưới nhé Xem Hoạt hình đường viền nút bút của yourpalnurav (@yourpalnurav) trên CodePen Nguồn Cách Tạo Nút hoạt ảnh đường viền di chuộtNút này cũng được sử dụng để tạo hiệu ứng chuyển động như ở trên nhưng điểm khác là nó sẽ di chuyển xung quanh các nút. Theo mình nghĩ thì nó mang lại một ấn tượng mạnh mẽ về tương lai nên sẽ phù hợp nhất là các trang web về cộng nghệ thông tin. Để hiểu rõ hơn bạn xem đoạn mã sau nhé Kết quả bạn xem bên dưới nhé Xem Pen #45 [100 Days of CSS Challenge] của Laura Pinto (@lauraalpinto) trên CodePen Nguồn Thiết Kế Buttons UIĐây là các nút bo gốc tạo cảm giác mềm mại và được tạo hiệu ứng bằng cách thay đổi màu nền, đường viền, nội dung giúp người dùng không bị mệt mỏi khi tương tác với các nút này. Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé Kết quả bạn xem bên dưới nhé Xem Giao diện người dùng nút bút của Tasneem Karwa (@tk89) trên CodePen Nguồn Tổng Hợp Các Hiệu Ứng Hover Button CSSĐây là tập hợp các hiệu ứng được tạo khi ta di chuột vào nút bằng cách bo góc, phóng to nút. Nó sẽ tạo ra sự đa dạng về hiệu ứng giúp người dùng có cảm giác thích thú khi trải nghiệm trang web của bạn. Để hiểu rõ hơn hãy cùng mình xem đoạn mã sau nhé Kết quả bạn xem bên dưới nhé Xem Pen Button Hover States của James Power (@thejamespower) trên CodePen Nguồn Cách tạo Button With Border RadiusĐây là nút tạo hiệu ứng thông báo cho người dùng sau khi hoàn thành một hành động nào đó trong trang web của chúng tôi. Điểm đặc biệt ở đây là cách chuyển từ nút sang hình ảnh khi người dùng nhấn vào và bạn cũng nên sử dụng màu xanh lá cây cho những hành động nào thành công nhé. Để hiểu rõ hơn hãy cùng mình xem đoạn mã dưới đây nha Kết quả bạn xem bên dưới nhé Xem Bút 024 - Nút của Matthias Martin (@roydigerhund) trên CodePen Nguồn Thiết Kế Animated CSS3 ButtonNút này sử dụng bố cục cục bộ về độ sâu như kiểu Nút phẳng giúp tạo nên sự hấp dẫn và bắt mắt. Hiệu ứng của nó cũng khá đơn giản là di chuyển theo hướng đã chọn một chút để tạo sự tương tác và sử dụng gradient màu nền để tạo độ tương phản nghịch của các thành phần trong nút. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé Kết quả bạn xem bên dưới nhé Xem các nút CSS3 hoạt hình bằng bút của creotip (@creotip) trên CodePen Nguồn Thiết Kế Hiệu Ứng Nút CSS Hoạt Hình LỏngKhi bạn muốn tạo ra một nút mang tính đột biến sáng tạo thì có thể loại nút này. Nó tạo cảm giác như có nước nằm ở bên trong và dòng nước này sẽ di chuyển theo vị trí của con trỏ chuột khi người dùng di chuột vào nút. Để hiểu rõ hơn bạn xem đoạn mã sau đây nhé Kết quả bạn xem bên dưới nhé Xem nút Pen Flush của Kamil (@KamilDyrek) trên CodePen Nguồn Nếu bạn muốn tham khảo các nút thiết kế và hiệu ứng khác dành cho trang web thì truy cập đường dẫn bên dưới nha Nếu bạn muốn tham khảo các nút thiết kế khác dành cho người mới bắt đầu thì truy cập đường dẫn bên dưới nha Tổng kếtMình lưu ý là khi bạn chọn nút cho trang web của mình thì hãy xem xét một số yếu tố là nó có phù hợp với thiết kế của trang không, màu sắc của nút có đủ nổi bật để thu hút sự chú ý của bạn không. Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian thiết kế nút giao diện trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ |
