Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
11 Bootstrap Button Dành Cho Website

11 Bootstrap Button Dành Cho Website


Ngày 10 Tháng 4 Năm 2020

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 tìm hiểu nhé!

Những Ví Dụ Component Button Trong Bootstrap

Trong việc phát triển web ngoài 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 những yếu tố giúp trải nghiệm và tương tác người dùng tốt hơn và một trong số đó là button. Nó có thể đảm nhận những nhiệm vụ khác nhau như là gửi form, nhận thông báo... do đó hãy cùng mình đi vào tìm hiểu các snippet button để 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ế Social Media Button 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 dụng gì? Bạn có thể tùy ý mở rộng thêm hoặc ẩn bớt các liên kết tùy vào nhu cầu sử dụng của mình. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Social Media Button Bootstrap

Kết quả bạn xem bên dưới nhé!

See the Pen button 1(source from Joshua Ward) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Bootstrap Button Group Với Icon:

Nút này sử dụng bố cục màu cơ bản và nổi bật hơn bằng màu nền đen, điểm nổi bật là đơn giản tối đa giúp cho người dùng hiểu ngay chức năng của nút. Nếu bạn để ý sẽ thấy khi hover vào icon ở mỗi nút thì ta sẽ có các chuyển động tương ứng với icon đó. Để hiểu rõ hơn bạn xem đoạn code bên dưới nhé:

Bootstrap Button Group Với Icon

Kết quả bạn xem bên dưới nhé!

See the Pen button 2(source from David Darnes) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Flat UI Button:

Nút này sử dụng bố cục phẳng 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ấp 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é:

Flat UI Button

Kết quả bạn xem bên dưới nhé!

See the Pen Flat UI Buttons 2 by Benjamin Gagne (@benngagne) on CodePen.

Nguồn

Cách Tạo Glass Button CSS3:

Nú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 ta hover vào nó. Và chúng ta cũng có thể chuyển đổi màu sắc tùy ý 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é:

Glass Button CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Chrome/Glass Buttons by James Holmes (@32bitkid) on CodePen.

Nguồn

Cách Tạo Button Border Animation:

Nút này sử dụng đường viền để tạo hiệu ứng bằng cách khi người dùng hover chuột lên thì đường viền sẽ thay đổi vị trí làm cho nó 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 ứng. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Button Border Animation

Kết quả bạn xem bên dưới nhé!

See the Pen Button Border Animation by yourpalnurav (@yourpalnurav) on CodePen.

Nguồn

Cách Tạo Hover Border Animation Button:

Nút này cũng sử dụng để tạo hiệu ứng chuyển động như ở trên nhưng điểm khác biệt là nó sẽ di chuyển xung quanh 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 code sau nhé :

Hover Border Animation Button

Kết quả bạn xem bên dưới nhé!

See the Pen #45 [100 Days of CSS Challenge] by Laura Pinto (@lauraalpinto) on 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ị nhàm chán khi tương tác với những nút này. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

Buttons UI

Kết quả bạn xem bên dưới nhé!

See the Pen Button UI by Tasneem Karwa (@tk89) on CodePen.

Nguồn

Tổng Hợp Các Hiệu Ứng Hover Button CSS:

Đây là tập hợp những hiệu ứng được tạo khi ta hover vào nút bằng cách bo góc, phóng to nút... Nó sẽ tạo 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 code sau nhé:

Kết quả bạn xem bên dưới nhé!

See the Pen Button Hover States by James Power (@thejamespower) on CodePen.

Nguồn

Cách tạo Button Với 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 ta. Đ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 code dưới đây nha:

Button Với Border Radius

Kết quả bạn xem bên dưới nhé!

See the Pen 024 - Button by Matthias Martin (@roydigerhund) on CodePen.

Nguồn

Thiết Kế Animated CSS3 Button:

Nút này sử dụng bố cục về độ sâu như kiểu Flat Button 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 đã cho một tí để tạo sự tương tác và sử dụng màu nền gradient để tạo độ tương phản giũa các thành phần trong nút. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Animated CSS3 Button

Kết quả bạn xem bên dưới nhé!

See the Pen Animated CSS3 buttons by creotip (@creotip) on CodePen.

Nguồn

Thiết Kế Hiệu Ứng Liquid Animation CSS Button:

Khi bạn muốn tạo ra một nút mang tính đột phá 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 hover vào nút. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé :

Liquid Animation CSS Button

Kết quả bạn xem bên dưới nhé!

See the Pen Flush button by Kamil (@KamilDyrek) on CodePen.

Nguồn

Tổng kết:

Mình có lưu ý là khi bạn chọn button cho trang web của mình thì hãy nên 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 người dùng không và hãy lắng nghe những ý kiến từ người dùng để hoàn thiện giao diện nút trong trang web hơn.

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện button 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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.