DocsAllOver Responsive CSS3 Pricing Table with Hover Animation Snippets

Responsive CSS3 Pricing Table with Hover Animation

Oct. 16, 2024

HTML, CSS, Dark Mode, Responsive, Pricing Tables

Full Screen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure Css Pricing Table</title>
</head>
<body>
    <div class="container group">
		<div class="grid-1-5">
			<h2>Basic</h2>
			<h3><span class="uppercase">Free</span></h3>
			<p>10,000 monthly visits</p>
			<ul>
				<li>Limited Email Support</li>
				<li>Unlimited Data Transfer</li>
				<li>10GB Local Storage</li>
			</ul>
			<a href="" class="button">Sign Up</a>
		</div>
		<div class="grid-1-5">
			<h2>Startup</h2>
			<h3><sup>$</sup>79<span class="small">/mo</span></h3>
			<p>25,000 monthly visits</p>
			<ul>
				<li>Limited Email Support</li>
				<li>Unlimited Data Transfer</li>
				<li>20GB Local Storage</li>
			</ul>		
			<a href="" class="button">Sign Up</a>	
		</div>
		<div class="grid-1-5">
			<h2>Growth</h2>
			<h3><sup>$</sup>179<span class="small">/mo</span></h3>
			<p>75,000 monthly visits</p>
			<ul>
				<li>Email Support</li>
				<li>Unlimited Data Transfer</li>
				<li>30GB Local Storage</li>
			</ul>	
			<a href="" class="button">Sign Up</a>		
		</div>
		<div class="grid-1-5">
			<h2>Premium</h2>
			<h3><sup>$</sup>499<span class="small">/mo</span></h3>
			<p>225,000 monthly visits</p>
			<ul>
				<li>Email Support</li>
				<li>Phone Support</li>
				<li>Unlimited Data Transfer</li>
			</ul>	
			<a href="" class="button">Sign Up</a>		
		</div>
		<div class="grid-1-5">
			<h2>Enterprise</h2>
			<h3><span class="uppercase">Let's Talk</span></h3>
			<p>1M+ monthly visits</p>
			<ul>
				<li>Email Support</li>
				<li>Phone Support</li>
				<li>Dedicated Environment</li>
				<li>Customized Plan</li>
			</ul>
			<a href="" class="button">Sign Up</a>
		</div>		
	</div>
</body>
</html>

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);

html {
    box-sizing: border-box;
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    background-color: rgb(33, 31, 35);
    background-repeat: no-repeat;
    @include filter-gradient(#53455b, #201e22, horizontal);
    @include background-image(radial-gradient(circle at top, rgba(83, 69, 91, 1) 0, rgba(32, 30, 34, 1) 70%));
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 100%;
    min-height: 100%;
    line-height: 1.5;
    padding: 2.5em 0;
}

.container {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

.grid-1-5 {
    border: 2px solid #5d4e65;
    min-height: 400px;
    padding: 1.25em;
    position: relative;
    text-align: center;
    transition: all .2s ease-in-out;

    @media screen and (min-width: 700px) {
        & {
            float: left;
            width: 50%;
        }

        &:nth-child(odd) {
            clear: left;
        }
    }

    @media screen and (min-width: 800px) {
        & {
            width: 33.3333333%;
        }

        &:nth-child(3n+1) {
            clear: left;
        }

        &:nth-child(odd) {
            clear: none;
        }
    }

    @media screen and (min-width: 1120px) {
        & {
            width: 20%;
        }

        &:nth-child(odd),
        &:nth-child(3n+1) {
            clear: none;
        }
    }

}

.grid-1-5:hover {
    background-color: rgb(83, 69, 91);
    @include filter-gradient(#53455b, #201d22, vertical);
    @include background-image(linear-gradient(top, rgba(83, 69, 91, 1) 0%, rgba(32, 29, 34, 1) 100%));
    border-top: 2px solid #ec7a37;
    border-bottom: 2px solid #ff4f69;
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 1);
    transform: scale(1.025);
    z-index: 2;

    &:before,
    &:after {
        content: "";
        position: absolute;
        background-color: rgb(246, 125, 53);
        @include filter-gradient(#f67d35, #ff4f68, vertical);
        @include background-image(linear-gradient(top, rgba(246, 125, 53, 1) 0%, rgba(255, 79, 104, 1) 100%));
        top: -2px;
        bottom: -2px;
        width: 2px;
    }

    &:before {
        left: -2px;
    }

    &:after {
        right: -2px;
    }

    & .button {
        background-color: rgb(238, 122, 54);
        @include filter-gradient(#ee7a36, #eb495d, horizontal);
        @include background-image(linear-gradient(left, rgba(238, 122, 54, 1) 0%, rgba(235, 73, 93, 1) 100%));
    }
}

h2,
h3,
p,
ul {
    margin: 0
}

h2 {
    font-size: 1em;
    font-weight: 400;
    margin: 0 0 0.5em;
}

h3 {
    font-size: 1.5em;
    letter-spacing: 0.0625em;
    margin: 0 0 0.3333333333333333em;
}

p {
    font-size: 0.875em;
}

p,
ul {
    margin: 0 0 1.5em
}

ul {
    color: #796583;
    font-size: 0.75em;
    list-style-type: none;
    padding: 0;

    li {
        margin: 0 0 0.8333333333333333em;
    }
}

.button {
    background-color: #9c83aa;
    border-radius: 20px;
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    padding: 0.75em 1.5em;
    position: absolute;
    bottom: 1.25em;
    left: 50%;
    margin-left: -60px;
    text-decoration: none;
    width: 120px;
}

.uppercase,
.button,
h2 {
    text-transform: uppercase;
}

sup,
.small {
    font-size: 0.6125em;
}

//Doesn't require any JS.

This snippet showcases a visually appealing and interactive pricing table designed to effectively compare different pricing plans. The table features a clean layout, clear pricing information, and engaging hover effects to highlight key features.

Key Features:

Responsive Design: The pricing table adapts seamlessly to various screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the table using CSS to match your website's design and branding.
Hover Effects: Engaging hover effects highlight key features and make the table more interactive.
Clear and Concise Presentation: The pricing plans are presented in a clear and organized manner, making it easy for users to understand and compare options.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the pricing table, including the container, table rows, and columns.
Apply CSS Styles: Use CSS to style the table elements, such as the table itself, rows, columns, headers, and content. Customize the colors, fonts, and spacing to match your website's design. Additionally, implement CSS to create the desired hover effects.

Latest Snippets

View All