Nút có nghĩa là hành động, nút là một yếu tố thiết yếu của thiết kế tương tác. Đó chính là lý do tại sao chúng ta cần quan tâm và thiết kế chúng đúng cách. Trong bài viết này mình đã tổng hợp một số mẫu Button CSS cực chất lượng trên Codepen. Enjoy!

1. Animated Ghost Button

Nút chuyển động dạng hơi “ma mị”, kiểu này rất phù hợp với những website đem lại cảm giác nguy hiểm ?! 😀

See the Pen Animated Ghost Button by Cameron (@numerical) on CodePen.light

Button.css: CSS3 Button Animations

Tổng hợp một số mẫu được tác giả kevinfan23 thường dùng. Trông nó rất hào nhoáng phải không?

light

8-bit Hovers

Nếu bạn còn ấn tượng với tuổi thơ game 8-bit, tại sao không thử dùng mẫu Button Hover 8-bit này. Thật sự Cool.

light

Animated SVG Hover Buttons

Với chuyển động viền chạy xung quay nút.

light

Box/Button Hovers

Tương tự như mẫu trên, nhưng có vẻ đa dạng hơn.

light

Button Explore

light

Button Hover States

light

Animation button #2

Wow, với kiểu thiết kế phẳng. Những mẫu nút Animation button #2 đem lại sự đơn giản mà lại độc đáo.

light

OK button

light

Cool Beans Button 60fps

Thật sự ấn tượng, với 2 tông màu đẹp mắt.

light

Button Animation Experiment – Dribbble

light

Gaming button with hover effect

light

Collection of Button Hover Effects

light

Blobs button

light

Button split effect

light

Half Fuller Buttons

light

Contact button

light

Simple Button Hover

light

Button Hover Effects

light

Button outline animation on hover

light

Animation button #3

light

Star Trek LCARS-style Ghost buttons

light

Animated CSS3 Buttons

light

CSS BUTTONS!!

light

Animated Gradient Ghost Button Concept

light

Button bubble effect

light

Kết

Trên đây là danh sách những mẫu Button CSS mà mình thấy cực chất lượng từ Codepen, hi vọng bài viết này có ích với bạn.

Ngoài ra bạn cũng có thể xem thêm: Tổng hợp một số mẫu Menu CSS cực ổn từ Codepen