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.
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.
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.
Section & Cards: The HTML structure is wrapped in a <section> tag with a class of pricing-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-plans class 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.
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.
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 an icon-yes or icon-no class 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 .pricing class 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.
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 .table and 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 .wrapper class 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.
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.
Container & Row: Using Bootstrap’s grid system (container and row) 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-table class encapsulates each pricing plan. This makes it easier to apply common styles and maintain code.
Price Value: The .price-value and .value classes are used to isolate the pricing information. This allows for targeted styling and potential JavaScript manipulation, like dynamic pricing updates.
Pricing Header: The .pricing-header class 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-content class 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-Up class 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-table class sets text alignment and z-index to ensure the text is centered and layered correctly. This improves the visual hierarchy.
Polygonal Background: The clip-path property 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 .value class 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.
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.
Container Class: The .container and .grid classes set the stage for the card layout. They’re the backbone of the design, providing structure and alignment.
Card Class: Ah, the .card class! This is where the Glassmorphism magic happens. It’s like a frosted glass pane that holds all the plan details.
Title & Pricing: The .card_title and .pricing classes are the stars of the show. They’re big, bold, and impossible to ignore—just like a headline act.
Features List: The .features class is the supporting cast. It lists what’s included in each plan, but without stealing the spotlight.
CTA Button: The .cta_btn class 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 body is the theater itself, setting the scene with a full-screen background image.
Glassmorphism: The .card class uses backdrop-filter to blur the background, creating that frosted glass effect. It’s like the special effects team in a movie.
Typography: Various classes like .card_title and .pricing ensure 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.
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.
Container: A <div> with a class of .container wraps 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 .row is used to contain the individual pricing plans. Each plan is placed within its own column, using .col-md-4 and .col-sm-6 to 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 body selector sets a top margin of 20px. The !important flag ensures this style takes precedence.
Typography: The h3 selector 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:focus and ul selectors remove text decoration from links and list bullets, respectively, for a cleaner look.
Pricing Table Base: The .pricing-table class sets the background color to #2b2f3a and text color to white. It also uses position: relative to enable absolute positioning within it.
Header Styling: The .pricing-header class sets the background color and padding for the header section of each plan. It also uses position: relative for potential child elements.
Ribbon Base: The .pricing-header class not only styles the header but also serves as the base for the ribbon effect. It uses position: relative to allow for the placement of pseudo-elements.
Pseudo-elements for Ribbon: The .pricing-header:before and .pricing-header:after pseudo-elements create the ribbon effect at both ends of the header. They are positioned absolutely within the .pricing-header and have a background color that matches the header.
Ribbon Corners: The :before and :after pseudo-elements for the .title class create the ribbon corners. They use border properties to create a triangular shape at both ends of the title.
Ribbon Skew: The .pricing-table:after and .pricingTable-Sign-Up:before pseudo-elements use the CSS transform: skew() property to create a skewed background, adding a 3D effect to the ribbon.
Dynamic Ribbon Colors: The .yellow and .blue classes can be added to change the ribbon color, making it dynamic and adaptable to different plans.
Price Styling: The .price-value class styles the price section, setting the background color to #546f7a and the font size to 50px.
Feature List Styling: The .pricing-content class 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-Up class styles the “Order Now” button, setting its background color and padding. It also uses position: relative for child elements.
Media Queries: The @media rules at the end make the pricing table responsive, adjusting its bottom margin based on screen size.
Wrapper Div: The .wrapper div 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-table div, which contains two main child divs: .head and .content.
Head Section: The .head div holds the title of the pricing plan, represented by an <h4> element.
Content Section: The .content div is further divided into three parts:
Price: A div with a class of .price displays the cost of the plan.
Features List: An unordered list (<ul>) enumerates the features of the plan.
Sign-Up Button: A div with a class of .sign-up contains the call-to-action button for signing up.
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 set box-sizing to border-box.
Typography: The body selector sets the default font family and size.
Grid Layout: The .wrapper class uses CSS Grid to layout the pricing tables, with responsive adjustments for smaller screens.
Pricing Table Styling: The .pricing-table class adds a box shadow, text alignment, and padding, along with rounded corners via border-radius.
Head Styling: The .head class sets a bottom border and includes a hover effect to change the border color.
Price Circle: The .price class 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 ul and li selectors remove list bullets and set margins, font size, and color for the features list.
Button Styling: The .btn class styles the sign-up button, including hover effects for a subtle shadow and color change.
