Loading....

5 Awesome CSS3 Buttons with Smooth Animation

Hello friends, welcome to my today’s post on css3 Button. Today I’m going to show you- How to create, style and animate buttons using only css3. No image, here we are only using simple gradient colors for backgrounds. I hope already you know, css3 has a great power of styling and can produce awesome effects just like flash. More over CSS3 doesn’t require heavy code or image for producing smooth animation. May be only day css3 will take place of Flash. So, lets start today’s tutorial.

Notes:I’ve tested following buttons in all major browsers. But Still IE versions not supports HTML5 and CSS3. Hope, CSS3 and HTML5 will work in IE10.

There 5 different color(Simple, Green, Red, Purple, Orange) sets and 5 different sizes(Small, Medium, Large, Xlarge, XXLarge) buttons. You just need to add class name according to your need. Very simple and re-useable classes.

1. Simple CSS3 Button:

Simle CSS3 Button

– CSS Code:

.button-container {
    float: left;
    margin: 10px 10px 10px 10px;
}
.btn{
    font-family: 'Anaheim', sans-serif;
    border: 1px solid lightslategray;
    cursor: pointer;
    padding: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: activecaption;    
    -moz-transition: all 0.3s ease-in-out;    
    -webkit-transition: all 0.3s ease-in-out;    
    -o-transition: all 0.3s ease-in-out;    
    -ms-transition: all 0.3s ease-in-out;    
    transition: all 0.3s ease-in-out;    
    color: #000000;
    font-weight: bold;
    box-shadow: 1px 0 1px rgba(0, 0, 0, 0.5);
}

.btn:hover{
    background: lightgray;    
    color: #FFFFFF;
}

.small{
    width: 60px;    
    font-size: 13px;
}

.medium{
    width: 120px;    
    font-size: 15px;
}
.large{
    width: 180px;    
    font-size: 18px;
}

.xlarge{
    width: 220px;    
    font-size: 21px;
}

.xxlarge{
    width: 250px;    
    font-size: 25px;
}

.rounded-corner{
    border-radius: 6px 6px 6px 6px;
}

.cross-rounded-corner{
    border-radius: 0px 6px 0px 6px;
}

– HTML Markup:

<div class="button-container">
    <h2>Demo 1</h2>
    <button class="btn small" name="button">Button</button>
    <button class="btn medium" name="button">Button</button>
    <button class="btn large" name="button">Button</button>
    <button class="btn xlarge" name="button">Button</button>
    <button class="btn xxlarge" name="button">Button</button>
</div> 
<div class="button-container">
    <h2>Demo 2 Rounded Corner</h2>
    <button class="btn rounded-corner small" name="button">Button</button>
    <button class="btn rounded-corner medium" name="button">Button</button>
    <button class="btn rounded-corner large" name="button">Button</button>
    <button class="btn rounded-corner xlarge" name="button">Button</button>
    <button class="btn rounded-corner xxlarge" name="button">Button</button>
</div> 
<div class="button-container">
    <h2>Demo 3 Cross Rounded Corner</h2>
    <button class="btn cross-rounded-corner small" name="button">Button</button>
    <button class="btn cross-rounded-corner medium" name="button">Button</button>
    <button class="btn cross-rounded-corner large" name="button">Button</button>
    <button class="btn cross-rounded-corner xlarge" name="button">Button</button>
    <button class="btn cross-rounded-corner xxlarge" name="button">Button</button>
</div>

Demo

2. Green Theme CSS3 Button:

Green Theme CSS3 Button

– CSS Code:

.theme-green{
    background: rgb(157,213,58);
    background: -moz-linear-gradient(top,  rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1)));
    background: -webkit-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
    background: -o-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
    background: -ms-linear-gradient(top,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
    background: linear-gradient(to bottom,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 );    
    color: #394f5f;    
    border: 2px solid #9fd549;
    box-shadow: 1px 1px 1px rgba(240,240,240,0.2) inset;
}

.theme-green:hover{    
    background: rgb(124,188,10);
    background: -moz-linear-gradient(top,  rgba(124,188,10,1) 0%, rgba(128,194,23,1) 53%, rgba(161,213,79,1) 55%, rgba(157,213,58,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(124,188,10,1)), color-stop(53%,rgba(128,194,23,1)), color-stop(55%,rgba(161,213,79,1)), color-stop(100%,rgba(157,213,58,1)));
    background: -webkit-linear-gradient(top,  rgba(124,188,10,1) 0%,rgba(128,194,23,1) 53%,rgba(161,213,79,1) 55%,rgba(157,213,58,1) 100%);
    background: -o-linear-gradient(top,  rgba(124,188,10,1) 0%,rgba(128,194,23,1) 53%,rgba(161,213,79,1) 55%,rgba(157,213,58,1) 100%);
    background: -ms-linear-gradient(top,  rgba(124,188,10,1) 0%,rgba(128,194,23,1) 53%,rgba(161,213,79,1) 55%,rgba(157,213,58,1) 100%);
    background: linear-gradient(to bottom,  rgba(124,188,10,1) 0%,rgba(128,194,23,1) 53%,rgba(161,213,79,1) 55%,rgba(157,213,58,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cbc0a', endColorstr='#9dd53a',GradientType=0 );    
    color: #f6efc9;
    border: 2px solid #7dbd0d;
    box-shadow: 1px 1px 1px rgba(255,255,255,0.6) inset;    
}

– HTML Markup:

<div class="button-container">
    <h2>Demo 1(Green Theme)</h2>
    <button class="btn small theme-green" name="button">Button</button>
    <button class="btn medium theme-green" name="button">Button</button>
    <button class="btn large theme-green" name="button">Button</button>
    <button class="btn xlarge theme-green" name="button">Button</button>
    <button class="btn xxlarge theme-green" name="button">Button</button>
</div>

<div class="button-container">
    <h2>Demo 2(Green Theme)</h2>
    <button class="btn rounded-corner small theme-green" name="button">Button</button>
    <button class="btn rounded-corner medium theme-green" name="button">Button</button>
    <button class="btn rounded-corner large theme-green" name="button">Button</button>
    <button class="btn rounded-corner xlarge theme-green" name="button">Button</button>
    <button class="btn rounded-corner xxlarge theme-green" name="button">Button</button>
</div>

<div class="button-container">
    <h2>Demo 3 Cross Rounded Corner(Green Theme)</h2>
    <button class="btn cross-rounded-corner small theme-green" name="button">Button</button>
    <button class="btn cross-rounded-corner medium theme-green" name="button">Button</button>
    <button class="btn cross-rounded-corner large theme-green" name="button">Button</button>
    <button class="btn cross-rounded-corner xlarge theme-green" name="button">Button</button>
    <button class="btn cross-rounded-corner xxlarge theme-green" name="button">Button</button>
</div>

Demo

3. Red Theme CSS3 Button:

Red Theme CSS3 Buttons

– CSS Code:

.theme-red{
    background: rgb(221,73,73);
    background: -moz-linear-gradient(top,  rgba(221,73,73,1) 0%, rgba(206,51,59,1) 49%, rgba(209,4,17,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,73,73,1)), color-stop(49%,rgba(206,51,59,1)), color-stop(100%,rgba(209,4,17,1)));
    background: -webkit-linear-gradient(top,  rgba(221,73,73,1) 0%,rgba(206,51,59,1) 49%,rgba(209,4,17,1) 100%);
    background: -o-linear-gradient(top,  rgba(221,73,73,1) 0%,rgba(206,51,59,1) 49%,rgba(209,4,17,1) 100%);
    background: -ms-linear-gradient(top,  rgba(221,73,73,1) 0%,rgba(206,51,59,1) 49%,rgba(209,4,17,1) 100%);
    background: linear-gradient(to bottom,  rgba(221,73,73,1) 0%,rgba(206,51,59,1) 49%,rgba(209,4,17,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4949', endColorstr='#d10411',GradientType=0 );    
    color: #FFFFFF;    
    border: 2px solid #9e344b;
    box-shadow: 1px 1px 1px rgba(240,240,240,0.2) inset;
}

.theme-red:hover{    
    background: rgb(209,4,17);
    background: -moz-linear-gradient(top,  rgba(209,4,17,1) 0%, rgba(206,51,59,1) 51%, rgba(221,73,73,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,4,17,1)), color-stop(51%,rgba(206,51,59,1)), color-stop(100%,rgba(221,73,73,1)));
    background: -webkit-linear-gradient(top,  rgba(209,4,17,1) 0%,rgba(206,51,59,1) 51%,rgba(221,73,73,1) 100%);
    background: -o-linear-gradient(top,  rgba(209,4,17,1) 0%,rgba(206,51,59,1) 51%,rgba(221,73,73,1) 100%);
    background: -ms-linear-gradient(top,  rgba(209,4,17,1) 0%,rgba(206,51,59,1) 51%,rgba(221,73,73,1) 100%);
    background: linear-gradient(to bottom,  rgba(209,4,17,1) 0%,rgba(206,51,59,1) 51%,rgba(221,73,73,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d10411', endColorstr='#dd4949',GradientType=0 );    
    color: #000000;
    border: 2px solid brown;
    box-shadow: 1px 1px 1px rgba(255,255,255,0.6) inset;    
}

– HTML Markup:

<div class="button-container">
    <h2>Demo 1(Red Theme)</h2>
    <button class="btn small theme-red" name="button">Button</button>
    <button class="btn medium theme-red" name="button">Button</button>
    <button class="btn large theme-red" name="button">Button</button>
    <button class="btn xlarge theme-red" name="button">Button</button>
    <button class="btn xxlarge theme-red" name="button">Button</button>
</div>

<div class="button-container">
    <h2>Demo 2(Red Theme)</h2>
    <button class="btn rounded-corner small theme-red" name="button">Button</button>
    <button class="btn rounded-corner medium theme-red" name="button">Button</button>
    <button class="btn rounded-corner large theme-red" name="button">Button</button>
    <button class="btn rounded-corner xlarge theme-red" name="button">Button</button>
    <button class="btn rounded-corner xxlarge theme-red" name="button">Button</button>
</div>

<div class="button-container">
    <h2>Demo 3 Cross Rounded Corner (Red Theme)</h2>
    <button class="btn cross-rounded-corner small theme-red" name="button">Button</button>
    <button class="btn cross-rounded-corner medium theme-red" name="button">Button</button>
    <button class="btn cross-rounded-corner large theme-red" name="button">Button</button>
    <button class="btn cross-rounded-corner xlarge theme-red" name="button">Button</button>
    <button class="btn cross-rounded-corner xxlarge theme-red" name="button">Button</button>
</div>


Demo

4. Purple Theme CSS3 Button:

Purple Theme CSS3 Button

– CSS Code:


.theme-purple{    
    background: rgb(219,54,164);
    background: -moz-linear-gradient(top,  rgba(219,54,164,1) 0%, rgba(168,0,119,1) 49%, rgba(193,70,161,1) 50%, rgba(203,96,179,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(219,54,164,1)), color-stop(49%,rgba(168,0,119,1)), color-stop(50%,rgba(193,70,161,1)), color-stop(100%,rgba(203,96,179,1)));
    background: -webkit-linear-gradient(top,  rgba(219,54,164,1) 0%,rgba(168,0,119,1) 49%,rgba(193,70,161,1) 50%,rgba(203,96,179,1) 100%);
    background: -o-linear-gradient(top,  rgba(219,54,164,1) 0%,rgba(168,0,119,1) 49%,rgba(193,70,161,1) 50%,rgba(203,96,179,1) 100%);
    background: -ms-linear-gradient(top,  rgba(219,54,164,1) 0%,rgba(168,0,119,1) 49%,rgba(193,70,161,1) 50%,rgba(203,96,179,1) 100%);
    background: linear-gradient(to bottom,  rgba(219,54,164,1) 0%,rgba(168,0,119,1) 49%,rgba(193,70,161,1) 50%,rgba(203,96,179,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db36a4', endColorstr='#cb60b3',GradientType=0 );
    color: #ffffff;    
    border: 2px solid #c31c8e;
    box-shadow: 1px 1px 1px rgba(240,240,240,0.2) inset;
}

.theme-purple:hover{    
    background: rgb(203,96,179);
    background: -moz-linear-gradient(top,  rgba(203,96,179,1) 0%, rgba(193,70,161,1) 50%, rgba(168,0,119,1) 51%, rgba(219,54,164,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(193,70,161,1)), color-stop(51%,rgba(168,0,119,1)), color-stop(100%,rgba(219,54,164,1)));
    background: -webkit-linear-gradient(top,  rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%);
    background: -o-linear-gradient(top,  rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%);
    background: -ms-linear-gradient(top,  rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%);
    background: linear-gradient(to bottom,  rgba(203,96,179,1) 0%,rgba(193,70,161,1) 50%,rgba(168,0,119,1) 51%,rgba(219,54,164,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 );    
    color: #000000;
    border: 2px solid #c859ae;
    box-shadow: 1px 1px 1px rgba(255,255,255,0.6) inset;    
}

– HTML Markup:

<div class="button-container">
    <h2>Demo 1(Purple Theme)</h2>
    <button class="btn small theme-purple" name="button">Button</button>
    <button class="btn medium theme-purple" name="button">Button</button>
    <button class="btn large theme-purple" name="button">Button</button>
    <button class="btn xlarge theme-purple" name="button">Button</button>
    <button class="btn xxlarge theme-purple" name="button">Button</button>
</div>

<div class="button-container">
    <h2>Demo 2(Purple Theme)</h2>
    <button class="btn rounded-corner small theme-purple" name="button">Button</button>
    <button class="btn rounded-corner medium theme-purple" name="button">Button</button>
    <button class="btn rounded-corner large theme-purple" name="button">Button</button>
    <button class="btn rounded-corner xlarge theme-purple" name="button">Button</button>
    <button class="btn rounded-corner xxlarge theme-purple" name="button">Button</button>
</div>

<div class="button-container">
    <h2>Demo 3 Cross Rounded Corner (Purple Theme)</h2>
    <button class="btn cross-rounded-corner small theme-purple" name="button">Button</button>
    <button class="btn cross-rounded-corner medium theme-purple" name="button">Button</button>
    <button class="btn cross-rounded-corner large theme-purple" name="button">Button</button>
    <button class="btn cross-rounded-corner xlarge theme-purple" name="button">Button</button>
    <button class="btn cross-rounded-corner xxlarge theme-purple" name="button">Button</button>
</div>

Demo

5. Orange Theme CSS3 Button:

Orange Theme CSS3 Button

– CSS Code:


.theme-orange{
    background: rgb(255,127,4);
    background: -moz-linear-gradient(top,  rgba(255,127,4,1) 0%, rgba(255,124,0,1) 49%, rgba(255,167,61,1) 50%, rgba(255,183,107,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,127,4,1)), color-stop(49%,rgba(255,124,0,1)), color-stop(50%,rgba(255,167,61,1)), color-stop(100%,rgba(255,183,107,1)));
    background: -webkit-linear-gradient(top,  rgba(255,127,4,1) 0%,rgba(255,124,0,1) 49%,rgba(255,167,61,1) 50%,rgba(255,183,107,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,127,4,1) 0%,rgba(255,124,0,1) 49%,rgba(255,167,61,1) 50%,rgba(255,183,107,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,127,4,1) 0%,rgba(255,124,0,1) 49%,rgba(255,167,61,1) 50%,rgba(255,183,107,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,127,4,1) 0%,rgba(255,124,0,1) 49%,rgba(255,167,61,1) 50%,rgba(255,183,107,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f04', endColorstr='#ffb76b',GradientType=0 );
    color: #000000;    
    border: 2px solid #ffb25c;
    box-shadow: 1px 1px 1px rgba(240,240,240,0.2) inset;
}

.theme-orange:hover{    
    background: rgb(255,183,107);
    background: -moz-linear-gradient(top,  rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,183,107,1)), color-stop(50%,rgba(255,167,61,1)), color-stop(51%,rgba(255,124,0,1)), color-stop(100%,rgba(255,127,4,1)));
    background: -webkit-linear-gradient(top,  rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 );    
    color: #f6efc9;
    border: 2px solid #ff7e02;
    box-shadow: 1px 1px 1px rgba(255,255,255,0.6) inset;    
}

– HTML Markup:

<div class="button-container">
    <h2>Demo 1(Orange Theme)</h2>
    <button class="btn small theme-orange" name="button">Button</button>
    <button class="btn medium theme-orange" name="button">Button</button>
    <button class="btn large theme-orange" name="button">Button</button>
    <button class="btn xlarge theme-orange" name="button">Button</button>
    <button class="btn xxlarge theme-orange" name="button">Button</button>
</div>

<div class="button-container">
    <h2>Demo 2(Orange Theme)</h2>
    <button class="btn rounded-corner small theme-orange" name="button">Button</button>
    <button class="btn rounded-corner medium theme-orange" name="button">Button</button>
    <button class="btn rounded-corner large theme-orange" name="button">Button</button>
    <button class="btn rounded-corner xlarge theme-orange" name="button">Button</button>
    <button class="btn rounded-corner xxlarge theme-orange" name="button">Button</button>
</div>

<div class="button-container">
    <h2>Demo 3 Cross Rounded Corner(Orange Theme)</h2>
    <button class="btn cross-rounded-corner small theme-orange" name="button">Button</button>
    <button class="btn cross-rounded-corner medium theme-orange" name="button">Button</button>
    <button class="btn cross-rounded-corner large theme-orange" name="button">Button</button>
    <button class="btn cross-rounded-corner xlarge theme-orange" name="button">Button</button>
    <button class="btn cross-rounded-corner xxlarge theme-orange" name="button">Button</button>
</div>

Demo

Download All Buttons

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!

How to create a triangle using CSS3

Today we are going to learn about how to create a triangle using CSS3. First of all it’s very simple to do, but required a to know a tip. We will use border-radius property to create that triangle. I’ve also added download and demo link just below the post. So you can check and download source code for future use. Let’s get started-

Idea of creating triangle using CSS3 is very simple but bit tricky. We need to create a div and assign a common class called “bwl-arrow”. We will make this div width and height zero(0px) and add 1em margin (optional). Then we will add few classes that will define the direction of arrow like – up, down, left and right. We will use CSS border property to create triangle.

Now, Idea of direction classes is – If you define an arrow for up direction you need to make left and right border transparent and add colors,width for bottom border. Remember one thing all border width must be same and it will give us a symmetric shape of triangle. In following example we will use 10px as border width. But you can add any size of border as you want. Let’s jump in to the code –

– HTML Snippets:

<div class="bwl-arrow-container">
  <p>Up Arrow: </p>
  <div class="bwl-arrow up"></div>
  <p>Down Arrow: </p>
  <div class="bwl-arrow down"></div>
  <p>Left Arrow: </p>
  <div class="bwl-arrow left"></div>
  <p>Right Arrow: </p>
  <div class="bwl-arrow right"></div>
</div>

– CSS Snippets:

.bwl-arrow-container{
    margin: 30px auto;
    width: 400px;
}

.bwl-arrow{
    width: 0px;
    height: 0px;
    margin: 1em;
}

.up{
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #A52A2A;
}

.down{
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #9ACD32;
}

.left{
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #FE6347;
}

.right{
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #6A5ACD;
}
[hr class=”fancy-hr”/] [button class=”btn btn-success” url=”http://demos.coolajax.net/css/create-triangle/” target=”blank” ]Demo[/button] [button class=”btn btn-primary” url=”http://demos.coolajax.net/css/create-triangle/create-triangle.zip” target=”blank” ]Download[/button] [hr class=”fancy-hr”/]

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!

Create A Cool CSS3 Pricing Table Less Then 15 Min

Pricing table is a cool way for representing pricing schemes, features and categories of our products in website. Most of the time pricing table used for showing different kinds of hosting plans and packages by web hosting companies. Users can easily compare prices between different packages from lists of pricing columns and choose best plan that suit for their business most.

Today I’m going to show you how to create a cool pricing table with 4 color theme using css3 within 15 min(approx.) Lets get started –

– What We Are Going To Create:

Create Pricing table less tan 15 min

– Is Really Possible To Create Pricing Table In 15 min?

Yes it’s possible. Before start coding, first of all you need to know what kind of HTML elements you are going to use in that pricing table. Here goes a list –

1. Single unordered list (UL) as pricing table wrapper.

2. 5 Lists(LI) for showing no of product packages columns.

3. 3 Divs inside LI for package price, package features and a signup buttons.

4. Inside package feature we use another unordered list(UL) for feature texts.

5. We also use 4 spans for package names and buttons text.

That’s it. Lets go for coding.

– CSS3 For Cool Pricing table:

I’ve created 4 color themes for demo. Here I’m going to present CSS3 Snippet for blue theme. I’ve also added some css3 button effects, so that it looks more pretty. You can also check my previous post on How to create CSS3 Buttons.

*{margin: 0; padding: 0;}

.bcpt_wrapper{
    font-family: verdana,Arial,sans-serif,serif;
    font-size: 12px;
    width: 1100px;
    margin: 150px auto 0 auto;
    border:3px solid #009eea;
    height: 312px;
    color: #000000;
    line-height: 3.0em;
    text-align: center;
}

.bcpt_wrapper>li{
  list-style-type: none;    
  width: 19.8%;
  float: left;
}

.bcpt_wrapper>li.gray_background{
  background:#dddddd;  
}

.bcpt_wrapper>li.white_smock_background{
    background: #f8f8f8;
}

.bcpt_wrapper .price{

    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2);
}

.bcpt_wrapper .price .package{
    display: block;
    font-size: 23px;
    font-weight: bold;
    color: #009eea;
}

.bcpt_wrapper .price .price_amount{
    font-size: 16px;
    font-weight: bold;
    color:#63707c;
}

.bcpt_wrapper .features li{
    list-style: none;
    color:#63707c;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

.bcpt_wrapper .footer{
    text-align: center;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2);
    border-top: 1px solid #ffffff;
    padding: 10px 0;
}

.bcpt_wrapper .footer .signup_button{
    background: linear-gradient(#8edcf8, #bfebfb) repeat scroll 0 0 transparent;
    border-radius: 15px 15px 15px 15px;
    color: #000000;
    display: inline-block;
    font-weight: bold;
    padding: 4px 20px;
    text-decoration: none;
    line-height: 2.0em;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.bcpt_wrapper .footer .signup_button:hover{
    box-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}

.clear{
    clear: both;
}

.bcpt_wrapper>li.active{

    transform: scale(1.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);    
    border: 5px solid #333333;
    background: linear-gradient(#FFFFFF,#c6e1e8);

}

.bcpt_wrapper>li.active .footer{
    background: #63707c;
}

.bcpt_wrapper>li.active .signup_button{ 
  background: linear-gradient(#00aff0,#48cdff);
  color: black;
  box-shadow: 1px 1px 3px rgba(255,255,255,0.5);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.bcpt_wrapper>li.active .signup_button:hover{
    box-shadow: 0px 1px 8px rgba(255,255,255,0.8);
}

– HTML Mark Up:

Here goes HTML Markeup for pricing table. You can use these template for all pricing tables. I’ve used 5 columns for demo. Try to create pricing tables with 7 columns.


<ul class="bcpt_wrapper">
 <li class="white_smock_background">
 <div class="price">
 <span class="package">Basic</span>
 <span class="price_amount">Free</span>
 </div>
 <div class="features">
 <ul>
 <li><strong>10000</strong> Inboxs</li>
 <li><strong>1</strong> Database</li>
 <li><strong>50MB</strong> Space</li>
 <li><strong>100GB</strong> Bandwidth</li>
 <li>24/7 Online Supports</li>
 </ul>
 </div>
 <div class="footer">
 <a href="#" class="signup_button">Sign Up</a>
 </div>
 </li>
 <li class="gray_background">
 <div class="price">
 <span class="package">Extra</span>
 <span class="price_amount">$29/Month</span>
 </div>
 <div class="features">
 <ul>
 <li><strong>10000</strong> Inboxs</li>
 <li><strong>5</strong> Database</li>
 <li><strong>500MB</strong> Space</li>
 <li><strong>500GB</strong> Bandwidth</li>
 <li>24/7 Online Supports</li>
 </ul>
 </div>
 <div class="footer">
 <a href="#" class="signup_button">Sign Up</a>
 </div>
 </li>
 <li class="active">
 <div class="price">
 <span class="package">Featured</span>
 <span class="price_amount">$35/Month</span>
 </div>
 <div class="features">
 <ul>
 <li><strong>10000</strong> Inboxs</li>
 <li><strong>10</strong> Database</li>
 <li><strong>1GB</strong> Space</li>
 <li><strong>500GB</strong> Bandwidth</li>
 <li>24/7 Online Supports</li>
 </ul>
 </div>
 <div class="footer">
 <a href="#" class="signup_button">Sign Up</a>
 </div>
 </li>
 <li class="white_smock_background">
 <div class="price">
 <span class="package">Mega</span>
 <span class="price_amount">$39/Month</span>
 </div>
 <div class="features">
 <ul>
 <li><strong>10000</strong> Inboxs</li>
 <li><strong>20</strong> Database</li>
 <li><strong>5GB</strong> Space</li>
 <li><strong>1000GB</strong> Bandwidth</li>
 <li>24/7 Online Supports</li>
 </ul>
 </div>
 <div class="footer">
 <a href="#" class="signup_button">Sign Up</a>
 </div>
 </li>
 <li class="gray_background">
 <div class="price">
 <span class="package">Ultimate</span>
 <span class="price_amount">$49/Month</span>
 </div>
 <div class="features">
 <ul>
 <li><strong>Unlimited</strong> Inboxs</li>
 <li><strong>Unlimited</strong> Database</li>
 <li><strong>Unlimited</strong> Space</li>
 <li><strong>Unlimited</strong> Bandwidth</li>
 <li>24/7 Online Supports</li>
 </ul>
 </div>
 <div class="footer">
 <a href="#" class="signup_button">Sign Up</a>
 </div>
 </li>
</ul>
<div class="clear"></div>

I’ve added some extra color codes in style-sheet. You can easily change them. In below I’ve added all themes demo and download link.

– Demo & Download:

1. Gray Theme.

2. Blue Theme.

3. Green Theme.

4. Orange Theme.

– Conclusion:

I hope these ideas of pricing able can give you some points and create a scope to innovate another nice pricing table with simple HTML and CSS3 stuffs. You know, We can see thousands of pricing table designs around us but don’t know how they designed or created. They looks like very fancy but it’s all about cool css3 tricks. So, now you know all secrets about how to create a pricing table. You can use my themes as your template. Change colors, background, fonts, try different width or height, make some cool buttons and create a new one and then share with us 🙂

– Now It’s Your Turn:

What kind of points or ideas did I missed in my tutorial? What do you think about designing cool pricing tables. Share your ideas, knowledge and suggestions with us below in discussion area.

Enjoy!

Back To Top