Design a Pricing Plan Using CSS3 in Under 15 Minutes – Downloadable

Today we continue the series of tutorials on basic HTML5 and CSS3 coding and we jump even deeper into CSS3 with this video on how to design a pricing plan.

If you own a product which you sell only on a subscription basis, then you will probably need pricing tables in order to showcase your product and the purchase options better. This tutorial will teach you how to do that.

The tutorial is based on lots of things we went through in the previous tutorials, but today you will also learn how to:

  • Only style some elements of a list without giving a class to each of them.
  • You will also learn how to apply different styles only on the first and last element of a parent (which could also be a list as well).
  • Regarding transitions, which we’ve worked with since the second tutorial, you will learn how to scale objects up or down on hover by using CSS instead of relying on JavaScript, as we had to before.

At the end of the video I also make a promise to you regarding what am I going to come with next time. Sneak peek: it’s for mobile.

Until next time, I hope you enjoy the video and, as always, I am looking forward to your feedback and comments.

Comparison Table Preview

By the end of this tutorial you will be able to design a pricing plan like the image below.

Design a Pricing Plan Using CSS3 in Under 15 Minutes - Downloadable

Saw the demo? If you’re ready to design a similar pricing plan, free up at least 23 minutes of your time and get ready to design your very first pricing table!

Pricing Plans Using CSS3 Video Tutorial

When You Design a Pricing Plan, Keep in Mind the Following:

  • Don’t over design it, people are after the information, not the design.
  • Make it visually pleasing and easy to read.
  • Don’t over complicate the code, be sure to always keep your CSS in check in case you will need to update it at a future date.

Tell us what you think about this video tutorial in the comments!

Christian Vasile

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. says

    I am planning to set one comparison table for my site. This design is same as i wanted. Thanks for sharing it.

  2. says

    Hi Christian,

    Excellent tutorial! Very simple and easy to follow… Thank you.

    Yes, I agree with you on the tables. I wouldn’t even know how to create a table anymore since it is very rare that we need them these days!!

    Cheers,
    Shanna

  3. Arshad Khan says

    its pretty much interesting for the people whom studying this development! it really helps a lot but the thing is i wanted to develop this thing in wordpress using html5 and css3, is it possible to merge these to different terms of development?

  4. says

    Perhaps adding the below for a small animation?

    .price ul {-webkit-transition: all 250ms ease-out;
    -moz-transition: all 250ms ease-out;
    -ms-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;}

  5. Awais Raza says

    I liked your CSS tutorial , but I still think there must have been more designing involved in it. Well overall, its easy to follow and good coding standard.

  6. says

    Very good and very clear tutorial Christian,

    There is a small extra thing I would accomplish. When I hover the LI elements my eyes are seeing an extra space on the .price div which is not always a pleasant image. At the first sight I would solve this by adding: .price:hover {outline:0;}. What do you think?

    Regards

    • Stephen says

      awesome tutorial i’m a new in web designing and i’ve been following your tutorials keep it up..

  7. says

    I was trying to make one pricing table for my new website. And just got it here. Thanks for the tutorial.
    I also agree with you. We should not over design it.

  8. Stefani says

    This was an AWESOME tutorial! THANK YOU SO MUCH! It was so easy to follow! I really, really love charts like these, and to be able to make them pop out on hover is so exciting!

    Do you have a tutorial for creating drop-downs using javascript or jquery? I’m a very new web designer and only know basic html and css…BUT, I really want to create drop-down lists (for example, a question on a FAQ list where when you click on the question, the answer appears). You explain everything so well, I’d love to learn how to do this from you!

    Thank you again!
    Stefani

    • Christian Vasile says

      Hi Stefani. I am glad you like my tutorial.

      Actually, right now I am working on the exact tutorial you asked for, only not in any scripting language. It will be pure HTML5/CSS3. Stay tuned on 1WD and you will learn soon how to do that.

    • rohit says

      for drop downs in css use :hover event handler.
      in js use getElementById(‘id’) and chage style display from none to block.
      it is quite easy to implement.

  9. says

    The timing of this post was absolutely perfect. I’m in the middle of redesigning my law firm’s website and this is absolutely perfect. I found some pricing products online but I really wanted to have a little more control over the outcome. Nice job!

  10. says

    Great video. I always glad to know bit more about HTML & CSS. For me video is easiest way to perceiving things. Thank you for your time and work!

  11. Martha says

    Great tutorial! Easy to understand and clean code. I also appreciate learning some features of CSS such as transform and child attributes in a list. I’m going to have to check out some of your other videos!

  12. says

    Looks great, but why don’t you use an HTML table to create it. Using lists instead makes it non-semantic and creates accessibility issues.

    By the way, the reply form for this article doesn’t give any clues as to what the fields are. Had to guess that it might be name, followed by email address, followed by website URL.

    • Christian Vasile says

      Hi Richard.

      I do not use tables because the purpose of this tutorial is to teach designers do stuff with HTML5 and CSS3 only. Tables are old and I do not like to use them that much.

      Regarding the reply fields, I will pass the message onto our design and development team, thank you!