Pricing Table with Cool Animation UI in HTML CSS jQuery

How to Create Pricing Table/Chart ?

Today we'll create a Beautiful and Responsive Pricing Table in HTML CSS and jQuery.

So Welcome Back friends to the CodingTuting ! I'm Jignesh Panchal, let's go head.

Responsive Pricing Table Template with Animations

1. What is Pricing Table ?

Pricing Table is a container which contains Key Points, Features, Specifications, Configuration, Price of any service or product, etc.

Pricing Table Design UI helps users/visitors to understand and differenciate among different different products/services. It is a very usefull part of a offer based website.

2. Use of Pricing Table

If we visit any website which offers Products/Services like Godaddy, Hostgator, Avira, etc. They all display their products in a tabular format. This tabular format is a Pricing Table. It contains the Specifications, Key Features, and Price of each product.

And if you are designing or developing any offer based website, then sure you'll need a Pricing Table Design for your project. Many plugins are available for Wordpress users to add Pricing Table in their blog.


But if know to code, so to create a design of Pricing Table UI by self coding is the better option then use of the plugin. We can also create a Pricing Table in Bootstrap. Bootstrap has inbuilt CSS which gives a beautiful look to our design.

But here I'm doing focus on self coding skills. Try to avoid Bootstrap sometime and develop by your own Coding Skills. So today we'll learn - How to Create a Pricing Table using HTML CSS and jQuery.

5 Super responsive css cards design, css cards animation

Super Cool Responsive Card Designs

In today's article, we'll see about a beautiful web design which is known as cards. I've created beautiful 5 different designs of Cards using CSS. These Cards are very easy to design and these are responsive too.

So, today you'll see that How to make Responsive Cards using CSS.

And, welcome to the website CodingTuting.Com with Jignesh Panchal, let's begin!!!

1. What are CSS Cards ?

CSS Cards are a perticular layout like a paper, 2D box. It is a specific container which contains some HTML Code, text/information, etc.

The best example of Cards are Business Cards which we see in our real life. These Business Cards contains some information about a person. So we can considor the Business Cards as HTML CSS Cards.

But in Web Design, Cards have many types and purpose. HTML CSS Cards have many use with different different designs and layout.

2. Use and Types of Cards

There are many uses and types of HTML CSS Cards. Use of Cards is depended upon the need and pieces of information. If we want to display only some text or few lines, so we should go with Basic Cards, which contains a snippet of some text and a link.

If we want to add a picture with the snippet, so should use Image Cards. We can make Image Card more beautiful by applying some CSS Animation on the image. We'll see a beautiful CSS Card UI with the image in this tutorial.

8 Awesome Hamburger Menu Button, html css menu icon

Animated Hamburger Menu Button HTML CSS | CodingTuting

Today's Web World is of Responsive Web Design. Where we have now is everything responsive. Image, Text, etc all are responsive. And Icons and Buttons also plays an important role in responsive web design.

Because it is not possible to show the content like Desktop in Small Screen Devices (Mobile, Tablet). So we use the Buttons and Menu Icon in HTML for the display that content.

And today we look about Hamburger Menu Button, it is the most important part of Responsive Design.

What is Hamburger Menu Button in Web Design?

It is a simple 3 Horizontal Graphic Lines on each other. It is a stack of 3 lines, and looks like burger stack, that's why it is known as Hamburger Menu Button . It is also called Menu Button. See the look of this button in the top image.


The use of Hamburger Menu Button is for expand and collapse the Main Menu, Navbar and other expandable content of the website. We can use Hamburger Menu for Mobile and Desktop as well.

We'll create Hamburger Menu to Cross CSS , Hamburger Menu and Back Button, Hamburger Menu to Sidebar Navigation Menu , etc in this tutorial.

Navigation Bar Hover Effect CSS, html css hover transition

Navigation Bar Hover Effects CSS | CodingTuting

Navigations are the first impression of the website. It contains the links to all pages of our website. I've posted and shared the source code about the Responsive and colorful Navbar before. If you haven't check that post, please see here.

Navigations are one of the main parts of the website, that's why HTML5 has given the <nav> tag, which is use to create navigation for website. We can create navbar by using HTML CSS, Bootstrap etc. All these navigations have simple and basic look.

Sometimes we want our navigation more attractive. For this, we use our own CSS. Today we'll do something like this. Today we'll make a Simple Navigation Bar using HTML5 <nav> tag. And we'll make it more attractive by giving a beautiful hover effect using CSS.

We'll give a beautiful touchup to our website by creating this Hover Effect Navbar. We'll use only HTML and CSS, and those creators who haven't knowledge of JavaScript, they will like it more.

See the Preview of CSS Hover Effect Navigation

You may also like

• Beautiful Fixed & Floating Social Share Buttons
• jQeury toggle effect
• Responsive Navbar

Now Focus on Source Code

Before look at the source code, let's understand How I did this? Don't be hurry for source code.

I'm using font-awesome .svg icons in my code. You can use it too or any others as you like.

• I creted the Navigation first using <nav> tag with class menu. And placed some links with icons in <a> tag.
• I gave the class active to the one link to show the active page.
• I gave a colored border-bottom to the each <a> tag.
• Then I gave padding:22px to each <a> tag which is equal to the base line of the Navigation.
• I defined the keyframe CSS3 animations for different different browser. This animation reduce the padding of <a> tag from 22px to 6px. And vice-versa one more animation.
• At last, I call this CSS3 Keyframe animation on hover the <a> tag.

Changing the padding of <a> tag from 22px to 6px (on hover), and 6px to 22px (default) is giving the animation effect to the navigation.

Above is the summary for understanding the source code. Please focus on this full source code and try to understand it. If you've any doubt please let me know in the comment.

HoverNavbar.html

<!--Code by CodingTuting.Com Jignesh Panchal-->
<!DOCTYPE html>
<html>

    <head>
        <title>Hover Nabvar</title>
        <link rel="stylesheet" href="StyleHoverNavbar.css"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    </head>

    <body>

        <nav class="menu">

            <a href="#" class="active" title="Home"><i class="fas fa-home"></i> Home </a>
            <a href="#" title="About"><i class="far fa-address-card"></i> About </a>
            <a href="#" title="Gallery"><i class="fas fa-photo-video"></i> Gallery </a>
            <a href="#" title="Contact"><i class="fas fa-mobile-alt"></i> Contact </a>
            <a href="#" title="FAQ"><i class="fas fa-question"></i> FAQ </a>            
        
        </nav>

    </body>

</html>

StyleHoverNavbar.css

/*Code by CodingTuting.Com Jignesh Panchal*/
@-webkit-keyframes up-underline {
    0% { padding: 22px 0px; }    
    100% { padding: 6px 0px; }
}

@-moz-keyframes up-underline {
    0% { padding: 22px 0px; }    
    100% { padding: 6px 0px; }
}

@-o-keyframes up-underline {
    0% { padding: 22px 0px; }    
    100% { padding: 6px 0px; }
}

@keyframes up-underline {
    0% { padding: 22px 0px; }    
    100% { padding: 6px 0px; }
}

@-webkit-keyframes down-underline {
    0% { padding: 6px 0px; }    
    100% { padding: 22px 0px; }
}

@-moz-keyframes down-underline {
    0% { padding: 6px 0px; }    
    100% { padding: 22px 0px; }
}

@-o-keyframes down-underline {
    0% { padding: 6px 0px; }    
    100% { padding: 22px 0px; }
}

@keyframes down-underline {
    0% { padding: 6px 0px; }    
    100% { padding: 22px 0px; }
}

body{
    margin:0;
}

.menu{
    text-align: center;
    line-height: 3.5;
    border-bottom: 4px solid #E91E63;
}

    .menu a{
        padding: 22px 0px;
        margin-right: 40px;
        font-family: arial;
        font-size: 18px;
        text-decoration: none;
        color: #282929;
        border-bottom: 3px solid #e91e63;
        
        -webkit-animation: down-underline .4s;
        -moz-animation: down-underline .4s;
        -o-animation: down-underline .4s;
        animation: down-underline .4s;

        -webkit-transition: all .2s ease-in;
        -moz-transition: all .2s ease-in;
        -o-transition: all .3s ease-in;
        transition: all .3s ease-in;
    }

    .menu a:hover{
        color:#e91e63;
        padding: 6px 0px;
            
        -webkit-animation: up-underline .4s;
        -moz-animation: up-underline .4s;
        -o-animation: up-underline .4s;
        animation: up-underline .4s;
    }

    .menu a.active{
        padding: 6px 0;
    }

We hope you got - How To Make Navigation Hover CSS. You can use this idea of animation to anywhere as you like. And you can also make more animations like this.

If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.

Sharing is Caring

Thanks for Reading

Keywords & Queries covered in this tutorial are:

• navigation css hover effects
• css hover transition
• css hover navbar
• navigation bar hover effects css
• CSS hover in a nav bar
• css hover effects
• nav html css3 hover effects
• how to make navigation hover css
• navigation bar with hover effect