content logo

Learn CSS:

24 CSS Pricing Plans Example

Source
devanswer.com
Dependencies
Font-awesome/Bootstrap
Made With
HTML / CSS
Responsive
Yes
Description

We have provided you with beautiful and colorful pricing panels in this code along with the effect of light reflection.

 

Source
devanswer.com
Dependencies
Reset
Made With
HTML / CSS
Responsive
Yes
Description

A simple pricing panel with a blue and white theme. Each panel can contain a photo that represents the type of service of that panel.

 

Source
devanswer.com
Dependencies
Font-awesome/Bootstrap
Made With
HTML / CSS
Responsive
Yes
Description

A simple pricing panel with a blue and white theme. Each panel can contain a photo that represents the type of service of that panel.

 

Source
devanswer.com
Dependencies
Normalize
Made With
HTML / CSS
Responsive
Yes
Description

This code includes a pricing panel with 5 items, which is inserted into the buttons and box in orange red theme hover mode.

 

Source
devanswer.com
Dependencies
Modernizr/Jquery
Made With
HTML / CSS /JS
Responsive
Yes
Description

This code includes a pricing panel that has a monthly or annual panel selection button. This panel has a white-green theme.

 

Source
devanswer.com
Dependencies
Modernizr/Jquery/Reset
Made With
HTML / CSS
Responsive
Yes
Description

We have a pricing table instead of a pricing panel in this code. This middle column of this table is made by a special red bar and is the best suggestion among the other panels in this table.

 

Source
devanswer.com
Dependencies
-
Made With
HTML / CSS
Responsive
Yes
Description

This code includes a pricing panel that has a hover effect. The two side panels get a little bigger at the time of the hover, and the middle panel, in addition to being enlarged, has a circle on top that rotates.

 

Source
devanswer.com
Dependencies
Font-awesome
Made With
HTML / CSS
Responsive
Yes
Description

Pricing panel with text change effect or button icon is included in this code that you can use this panel with white, green and gray theme.

 

Source
devanswer.com
Dependencies
Reset
Made With
HTML / CSS
Responsive
Yes
Description

This pricing panel has a variety of colors in each panel. There is also a button at the end of each panel that in hover mode, this button expands to full width. The shadow of the phrase dollar also moves in this panel in hover mode.

 

Source
devanswer.com
Dependencies
Normalize
Made With
HTML / CSS
Responsive
Yes
Description

In this code, each panel has features in the pricing table, and these features are shown in the following table as a percentage bar. The percentage of features of each panel is displayed in hover mode.

 

Source
devanswer.com
Dependencies
-
Made With
HTML / CSS /JS
Responsive
Yes
Description

Our pricing panel in this code has a progress bar that changes the amount of pricing panel items by changing the progress bar.

 

Source
devanswer.com
Dependencies
Reset
Made With
HTML / CSS
Responsive
Yes
Description

There are balls in this code that move up and down and are consistent with the theme of the pricing panels. In general, this panel has a dark theme.

 

Source
devanswer.com
Dependencies
-
Made With
HTML / CSS
Responsive
Yes
Description

The panels in this code are normally white. By placing the mouse cursor on the panels, a blue background is created on it. This background is placed before the button.

 

Source
devanswer.com
Dependencies
-
Made With
HTML / CSS
Responsive
Yes
Description

Below the price of these pricing panels in this code there are a number of waves that move with the movement of the mouse.

 

Source
cssfreecode.com
Dependencies
-
Made With
HTML / CSS
Responsive
Yes
Description

The tabs in this code have a price shadow in the background. Also, the button at the bottom and end of the code is half and in hover mode, this button is complete. The color of this button is white.

 

Source
frontendfreecode.com
Dependencies
Bootstrap/Jquery
Made With
HTML / CSS
Responsive
Yes
Description

In addition, below the prices, there is a wave-like effect, and in the hover mode, these waves move. In this code, by placing the mouse on the pricing panels, these panels are slightly zoomed.

 

Source
frontendfreecode.com
Dependencies
Bootstrap/Jquery/Font-awesome
Made With
HTML / CSS
Responsive
Yes
Description

Each pricing table in this code has an icon. The background of the pricing tables is blue in the middle and the rest are white and turn blue in hover mode.

 

Source
frontendfreecode.com
Dependencies
Bootstrap/Jquery/Font-awesome
Made With
HTML / CSS
Responsive
Yes
Description

Each item in the pricing table in hover mode gets a little bigger and the rest of the panels get lighter. By placing the mouse on the button, the color of the button changes as a slide animation.

 

Source
frontendfreecode.com
Dependencies
Bootstrap/Font-awesome
Made With
HTML / CSS
Responsive
Yes
Description

The pricing panels in this code are three-dimensional and the background color of the button is pink. This button color and the background of the prices will be green in hover mode.

 

Source
frontendfreecode.com
Dependencies
Bootstrap
Made With
HTML / CSS
Responsive
Yes
Description

Pricing panels in this code have a background color change effect. Normally, the top of the panels is green and the bottom of them is black. In the case of hover, these two colors are changed and the top is black and the bottom is green.

 

Source
frontendfreecode.com
Dependencies
Bootstrap/Font-awesome
Made With
HTML / CSS
Responsive
Yes
Description

In this code, the pricing panels have icons in each item and are placed next to each other in the form of a table. Each column identifies a panel, and each column has a color for its icons and buttons.

 

Source
frontendfreecode.com
Dependencies
Bootstrap/Font-awesome/Jquery
Made With
HTML / CSS
Responsive
Yes
Description

Unlike other pricing panels that are rectangular, in this code these panels are circular and in each circle a color is provided for the circle theme. In addition, the background of the circle changes color during the hover.

 

Source
frontendfreecode.com
Dependencies
Bootstrap
Made With
HTML / CSS
Responsive
Yes
Description

Pricing panels in this code are two colors. Prices are located inside a hexagon. By placing the mouse cursor on each panel, that panel will be displayed slightly larger. The overall theme of the panel is white and purple.

 

Source
frontendfreecode.com
Dependencies
Bootstrap/Font-awesome
Made With
HTML / CSS
Responsive
Yes
Description

In this code, pricing panels have headers and buttons with a background color. The body of the panels is also gray. Each button glows in hover effect mode.

#

CSS Example

#

Free CSS Code

#

Free Pricing Plans

#

CSS Pricing Plan Code