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

Facebook
Twitter
Google+
Pinterest
+

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!

Facebook
Twitter
Google+
Pinterest
+

AwesomeWeb is Awesome!

Andreas W.

Submitted 9:02 AM .Oct 16, 2014

Hi Nick. If you have work that needs to be done, send me an email. I am glad to help out. Awesomeweb already helped me to earn an awesome 3,700 dollars since the start.;) ... yeah farewell Elance!

Comments

  1. 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

  2. Arshad Khan

    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?

  3. 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;}

  4. Awais Raza

    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.

  5. 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

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

  6. 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.

  7. Stefani

    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

      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

      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.

  8. 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!

  9. 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!

  10. Martha

    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!

  11. 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

      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!