Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu những thiết kế pricing table đẹp cho trang web bằng HTML, CSS và Javascript nhé!
Nếu bạn muốn xem lại phần 1 thì có thể truy cập ở đây nhé!
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Ví Dụ 1
See the Pen Responsive Flip Pricing Table by Shane Heyns (@shaneheyns) on CodePen.
Ví Dụ 2
See the Pen Pricing Table by Mike Torosian (@mtorosian) on CodePen.
Ví Dụ 3
See the Pen Price by catcod (@catcode) on CodePen.
Ví Dụ 4
See the Pen Pricing - pure css - #16 by Ivan Grozdic (@ig_design) on CodePen.
Ví Dụ 5
See the Pen Pricing Table | Tabla de Precios by Agustin Ortiz (@Creaticode) on CodePen.
Ví Dụ 6
See the Pen Adaptive Pricing Table by Alex (@VoloshchenkoAl) on CodePen.
Ví Dụ 7
See the Pen RESPONSIVE PRICING TABLE DESIGN by Digimad Media (@DigimadMedia) on CodePen.
Ví Dụ 8
See the Pen Pricing Table Design by Swarup Kumar Kuila (@uiswarup) on CodePen.
Ví Dụ 9
See the Pen Material pricing tables by Kreso Galic (@kresogalic) on CodePen.
Ví Dụ 10
See the Pen Pricing Table by Paulo Ribeiro (@eggnator) on CodePen.
Ví Dụ 11
See the Pen Pricing Tables by hmache (@hmache) on CodePen.
Ví Dụ 12
See the Pen Pricing Table by Joanez Andrades (@JoanezAndrades) on CodePen.
Ví Dụ 13
See the Pen Pricing Design - #036 of #100Days100Projects by Florin Pop (@FlorinPop17) on CodePen.
Ví Dụ 14
See the Pen #1265 - Pricing table by LittleSnippets.net (@littlesnippets) on CodePen.
Ví Dụ 15
See the Pen Holiday Feature Folding Cards [Pure CSS] by Madalena Aza (@Madalena-Design) on CodePen.
Ví Dụ 16
See the Pen Clip Mask Pricing Table by Jessica Biggs (@bigglesrocks) on CodePen.
Ví Dụ 17
See the Pen Responsive pricing table CSS3 by Soufiane Abid (@SoufianeAbid) on CodePen.
Ví Dụ 18
See the Pen Pricing table with toggle button by Alina N. (@blackellis) on CodePen.
Ví Dụ 19
See the Pen Pricing Tables by Dylan Mcleod (@dylanmcleod) on CodePen.
Ví Dụ 20
See the Pen Pricing Table by Katherine Kato (@kathykato) on CodePen.
Ví Dụ 21
See the Pen Service Pricing Selection by Daniel Boothman (@web-dev123) on CodePen.
Ví Dụ 22
See the Pen #1255 - Dark themed pricing table by LittleSnippets.net (@littlesnippets) on CodePen.
Ví Dụ 23
See the Pen Pricing Tables by Joseph Victory (@j-w-v) on CodePen.
Ví Dụ 24
See the Pen Pricing Tables by Eric Thayer (@ericthayer) on CodePen.
Ví Dụ 25
See the Pen Responsive Pricing Table by Scott Nix (@scottnix) on CodePen.
Ví Dụ 26
See the Pen Simple Pricing Table by John Bowie (@bowie) on CodePen.
Ví Dụ 27
See the Pen pricing table by Chouaib Belagoun (@chouaibblgn45) on CodePen.
Ví Dụ 28
See the Pen Simple Flat Pricing Detail by Jitendra (@berdejitendra) on CodePen.
Ví Dụ 29
See the Pen Pricing Table by Marcus Calkins (@Marcus-C) on CodePen.
Ví Dụ 30
See the Pen #1517 - Pricing Table by LittleSnippets.net (@littlesnippets) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những pricing table hữu ích dành cho việc phát triển, thiết kế web 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ẻ!