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!
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
Leave a Reply