CSS pricing tables are a way of displaying different plans or options for a product or service on a website. They usually have columns for each plan, and rows for the features or benefits. I’m excited to share a curated collection of over 15+ CSS pricing tables, complete with free source code. You can easily download these and integrate them into your upcoming projects.
Diamond Pricing Table (Fully Responsive)
Responsive Pricing Table: Showcase and Compare Offers
Description
This project aims to display three subscription options—Basic, Standard, and Business—in a visually appealing manner. Each option is presented in a unique, stylish box that includes a title, an icon, the cost per student or team, and a list of features. A “START FREE 7-DAY TRIAL” button is also included in each box to encourage users to try out the service. The design is modern, clean, and user-friendly, making it easier for potential customers to make a decision based on their needs and budget.
Html Pricing Table
Description
The code snippet is designed to showcase pricing plans for a hosting service. The layout is divided into three distinct cards, each representing a different tier of service: Basic, Standard, and Premium. Each card is color-coded and contains a wealth of information, making it easier for potential customers to compare and contrast the features of each plan. The design is sleek yet informative, aiming to guide the user effortlessly through their decision-making process.
Customization:
Html:
- Section & Cards: The HTML structure is wrapped in a
<section>tag with a class ofpricing-plans. Inside, there are three<div>elements, each representing a pricing card (Basic, Standard, Premium). - Heading: Each card has a heading section with an
<h4>tag for the plan name and a<p>tag for a brief description. - Price: The price is displayed prominently, with a
<sub>tag for the “/month” text. - Features: A list of features is presented in an unordered list (
<ul>), with each feature in a list item (<li>). - CTA Button: A call-to-action (CTA) button labeled “SELECT” is placed at the bottom of each card.
CSS:
- Global Styles: The CSS starts with global styles, setting the margin, padding, and font for all elements.
- Body & Layout: The body of the page is styled to center the pricing table. The
.pricing-plansclass uses Flexbox for layout. - Card Styles: Each pricing card has a base style defined under
.pricing-card, with variations based on the plan type (Basic, Standard, Premium). - Hover Effects: A hover effect is added to the cards, making them slightly lift and change color when hovered over.
- Typography: Various text elements within the cards are styled for readability and emphasis.
- CTA Button: The CTA button is styled to match the color scheme of each card and changes appearance when clicked.
Pricing Table
Description
This snippet is a sophisticated pricing table designed for a service-based website. It features three distinct pricing plans: Free, Lite, and Pro. Each plan is encapsulated in a card-like container, with varying background gradients and icons to differentiate them.
Customization:
HTML:
- Container & Pricing Divs: The layout starts with a
<div>element with a class of.container, which houses another<div>with a class of.pricing. This sets the stage for the pricing cards. - Pricing Cards: Each pricing card is a
<div>element with a class of.pricing-card. They contain a heading, a list of features, the price, and a ‘Buy’ button. - Headings: The headings are
<h3>elements with classes that change based on the plan, allowing for different background colors. - Features List: The features are listed in an unordered list (
<ul>), with list items (<li>) that have either anicon-yesoricon-noclass to indicate availability. - Price & Button: The price is displayed in a
<p>element, and the ‘Buy’ button is a<button>element.
CSS:
- Global Styles: Universal styles for box-sizing, margin, and padding are set initially.
- Typography: The Poppins font is used for a modern look.
- Layout & Flexbox: The
.pricingclass uses flexbox to align the pricing cards. - Card Styling: Each card has a shadow, rounded corners, and padding for a card-like appearance.
- Icons: Custom icons are used before each list item, with filters applied for color manipulation.
- Button Styles: The buttons have transitions for hover effects and change in appearance based on the plan.
Responsive Pricing Table
Walkthrough of Code:
Html:
- Wrapper Div: The entire pricing table is wrapped in a
<div>with a class of.wrapper. - Table Divs: Each pricing plan is represented by a
<div>with a class of.tableand an additional class for the plan name (e.g.,.Basic,.Premium,.Ultimate). - Price Section: The price is displayed in a circular design, using nested divs and spans to create the effect.
- Package Name: A horizontal line with the package name displayed in the middle.
- Features List: Features are listed in a
<div>with a class of.features. Each feature is a list item (<li>) with a description and an icon. - Button: A ‘Purchase’ button is at the bottom of each card.
CSS:
- Global Styles: Universal styles for box-sizing, margin, and padding are set initially.
- Flexbox: The
.wrapperclass uses flexbox to align the pricing cards. - Card Styling: Each card has a shadow for depth and padding for spacing.
- Price Circle: The price is displayed in a circular design, achieved through border-radius and nested divs.
- Icons: Font Awesome icons are used to indicate feature availability.
- Button Styles: The buttons have transitions for hover effects and change in appearance based on the plan.
- Media Queries: Responsive design is implemented for different screen sizes.
Pure CSS Animated Pricing
Walkthrough of Code:
It’s a fully responsive pricing plan created using Clip-path and CSS, featuring a beautiful hover effect on the button. The project was initially created on June 8, 2018, and last updated on July 26, 2018.
Html:
- Container & Row: Using Bootstrap’s grid system (
containerandrow) simplifies the layout creation. It ensures that the pricing tables are aligned and responsive without having to write custom CSS. - Pricing Table Div: The
.pricing-tableclass encapsulates each pricing plan. This makes it easier to apply common styles and maintain code. - Price Value: The
.price-valueand.valueclasses are used to isolate the pricing information. This allows for targeted styling and potential JavaScript manipulation, like dynamic pricing updates. - Pricing Header: The
.pricing-headerclass is used to separate the plan name from the rest of the content. This enhances readability and allows for specific styling. - Pricing Content: The
.pricing-contentclass wraps the feature list. This is useful for applying styles to the list as a whole, like padding or background color. - Sign-Up Button: The
.pricingTable-Sign-Upclass is used to style the ‘Buy Plan’ button distinctly from other elements, making it stand out to encourage user action.
CSS:
- Global Styles: General styles for the body and headings are set to ensure consistency across the page. This reduces redundancy in the code.
- Pricing Table: The
.pricing-tableclass sets text alignment and z-index to ensure the text is centered and layered correctly. This improves the visual hierarchy. - Polygonal Background: The
clip-pathproperty is used to create a unique, eye-catching background shape. This adds a modern, dynamic feel to the design. - Price Styling: The hover effect on the
.valueclass adds interactivity, making the user experience more engaging. - Plan Name: The hover effect on the plan name (
letter-spacing) subtly draws attention, encouraging users to interact. - Feature List: The subtle border between each feature (
border-bottom) improves readability by separating each item. - Button: The hover effect on the ‘Buy Plan’ button is designed to capture attention, encouraging users to take action.
- Media Query: The media query ensures the design is responsive, adapting to different screen sizes without requiring separate code for each device.
Glassmorphiam Responsive Pricing Table UI
Walkthrough of Code:
The design employs a popular UI trend known as “Glassmorphism,” characterized by frosted glass-like elements with a blurred background, semi-transparency, and vivid, layered colors. This creates a sense of depth and a futuristic, immersive user experience.
Html:
- Container Class: The
.containerand.gridclasses set the stage for the card layout. They’re the backbone of the design, providing structure and alignment. - Card Class: Ah, the
.cardclass! This is where the Glassmorphism magic happens. It’s like a frosted glass pane that holds all the plan details. - Title & Pricing: The
.card_titleand.pricingclasses are the stars of the show. They’re big, bold, and impossible to ignore—just like a headline act. - Features List: The
.featuresclass is the supporting cast. It lists what’s included in each plan, but without stealing the spotlight. - CTA Button: The
.cta_btnclass is the showstopper, urging you to take action. It’s styled to grab your attention but not to overwhelm.
CSS:
- Universal Styles: The
*selector is the stagehand, setting everything to zero and making sure the show runs smoothly. - Body Styling: The
bodyis the theater itself, setting the scene with a full-screen background image. - Glassmorphism: The
.cardclass usesbackdrop-filterto blur the background, creating that frosted glass effect. It’s like the special effects team in a movie. - Typography: Various classes like
.card_titleand.pricingensure that the text is not just legible but also theatrical. It’s the script of our play. - Hover Effects: These are the interactive elements, the audience participation if you will. They make sure you’re not just watching but also engaging.
- Media Queries: These are the adaptable set designs, ensuring the show looks good whether you’re sitting in the front row or the back.
Pricing Table Comparison Plan
CSS3 Pricing Table
Pure Css Pricing Plan(Svg)
Awesome CSS Pricing Card
Responsive Pricing Table (HTML & CSS) Only
Simple Pricing Table
CSS Ribbon Style Pricing Plan
Walkthrough of Code:
This pricing table offers three different plans, each with its own set of features and pricing. It’s a straightforward way to display various service tiers to potential customers.
Html:
- Container: A
<div>with a class of.containerwraps the entire pricing table, which is standard practice in Bootstrap to center and pad the content. - Row and Columns: Inside the container, a
<div>with a class of.rowis used to contain the individual pricing plans. Each plan is placed within its own column, using.col-md-4and.col-sm-6to define the column width based on screen size. - Individual Plans: Each plan is encapsulated in a
<div>with a class of.pricing-table. Inside this, several child divs define the header, price, features, and the “Order Now” button. - List of Features: An unordered list (
<ul>) is used to list the features of each plan. Each feature is a list item (<li>).
CSS:
- Body Styling: The
bodyselector sets a top margin of 20px. The!importantflag ensures this style takes precedence. - Typography: The
h3selector sets the font size to 25px and the font weight to 600, making the plan titles bold and prominent. - Global Styles: The
a:hover, a:focusandulselectors remove text decoration from links and list bullets, respectively, for a cleaner look. - Pricing Table Base: The
.pricing-tableclass sets the background color to#2b2f3aand text color to white. It also usesposition: relativeto enable absolute positioning within it. - Header Styling: The
.pricing-headerclass sets the background color and padding for the header section of each plan. It also usesposition: relativefor potential child elements. - Ribbon Base: The
.pricing-headerclass not only styles the header but also serves as the base for the ribbon effect. It usesposition: relativeto allow for the placement of pseudo-elements. - Pseudo-elements for Ribbon: The
.pricing-header:beforeand.pricing-header:afterpseudo-elements create the ribbon effect at both ends of the header. They are positioned absolutely within the.pricing-headerand have a background color that matches the header. - Ribbon Corners: The
:beforeand:afterpseudo-elements for the.titleclass create the ribbon corners. They use border properties to create a triangular shape at both ends of the title. - Ribbon Skew: The
.pricing-table:afterand.pricingTable-Sign-Up:beforepseudo-elements use the CSStransform: skew()property to create a skewed background, adding a 3D effect to the ribbon. - Dynamic Ribbon Colors: The
.yellowand.blueclasses can be added to change the ribbon color, making it dynamic and adaptable to different plans. - Price Styling: The
.price-valueclass styles the price section, setting the background color to#546f7aand the font size to 50px. - Feature List Styling: The
.pricing-contentclass sets the font size, color, and line height for the feature list. It also adds a bottom border to each list item for separation. - CTA Button Styling: The
.pricingTable-Sign-Upclass styles the “Order Now” button, setting its background color and padding. It also usesposition: relativefor child elements. - Media Queries: The
@mediarules at the end make the pricing table responsive, adjusting its bottom margin based on screen size.
CSS Gradient Pricing Table
Walkthrough of Code:
Html:
- Wrapper Div: The
.wrapperdiv serves as the container for all the pricing tables, providing a grid layout for them. - Individual Pricing Tables: Each pricing table is encapsulated in a
.pricing-tablediv, which contains two main child divs:.headand.content. - Head Section: The
.headdiv holds the title of the pricing plan, represented by an<h4>element. - Content Section: The
.contentdiv is further divided into three parts:- Price: A div with a class of
.pricedisplays the cost of the plan. - Features List: An unordered list (
<ul>) enumerates the features of the plan. - Sign-Up Button: A
divwith a class of.sign-upcontains the call-to-action button for signing up.
- Price: A div with a class of
- Strikethrough Features: The
<del>tag is used to strike out features that are not included in the plan, providing a visual cue to the user.
CSS:
- Global Reset: The
*selector is used to reset default margins and padding, and to setbox-sizingtoborder-box. - Typography: The
bodyselector sets the default font family and size. - Grid Layout: The
.wrapperclass uses CSS Grid to layout the pricing tables, with responsive adjustments for smaller screens. - Pricing Table Styling: The
.pricing-tableclass adds a box shadow, text alignment, and padding, along with rounded corners viaborder-radius. - Head Styling: The
.headclass sets a bottom border and includes a hover effect to change the border color. - Price Circle: The
.priceclass styles the price as a circle with a gradient background and a white border. It also includes a hover effect to scale the circle. - List Styling: The
ulandliselectors remove list bullets and set margins, font size, and color for the features list. - Button Styling: The
.btnclass styles the sign-up button, including hover effects for a subtle shadow and color change.
Advanced Responsive Flip Pricing Table
