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

Posted in Coding, HTML & CSS, Tutorials11 months ago • Written by 21 Comments

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!

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

69 Written ArticlesWebsite

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.

21 Comments Best Comments First
  • Stefani

    Friday, May 24th, 2013 18:45

    5

    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

    +3
    • rohit

      Friday, August 9th, 2013 12:29

      20

      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.

      0
    • Christian Vasile

      Monday, May 27th, 2013 09:33

      10

      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.

      +2
  • Chris

    Friday, May 24th, 2013 17:52

    4

    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!

    +1
  • Armands

    Friday, May 24th, 2013 16:00

    3

    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!

    +1
  • Alex

    Sunday, May 26th, 2013 08:54

    9

    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

    0
    • Stephen

      Saturday, June 1st, 2013 22:06

      13

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

      0
  • Brad pit

    Monday, July 15th, 2013 08:10

    17

    nice tutorial, we want to implemnt it in our site

    0
  • Alex

    Thursday, August 15th, 2013 01:47

    21

    Very impressive man…I really love all your tutorials. Very easy and i learn a lot. Thanks.

    0
  • Rootvik

    Wednesday, July 31st, 2013 08:50

    19

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

    0
  • Lester Gonzales

    Friday, May 24th, 2013 22:23

    6

    Thanks Dude!

    0
  • Shanna

    Monday, July 22nd, 2013 07:21

    18

    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

    0
  • Martha

    Friday, May 24th, 2013 14:03

    2

    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!

    0
  • Arshad Khan

    Tuesday, July 2nd, 2013 19:37

    16

    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?

    0
  • Jonath Lee

    Monday, June 17th, 2013 21:59

    15

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

    0
  • Sebastian

    Sunday, June 9th, 2013 09:24

    14

    Transform not work on chrome

    0
  • Awais Raza

    Wednesday, May 29th, 2013 11:31

    12

    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.

    0
  • Arunshory

    Saturday, May 25th, 2013 05:39

    8

    It is very simple and professional theme. Zooming effect is good for the particular price plan. Very nice.

    -1
  • Tahmid

    Saturday, May 25th, 2013 01:01

    7

    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.

    -1
  • Richard

    Friday, May 24th, 2013 13:43

    1

    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.

    -1
    • Christian Vasile

      Monday, May 27th, 2013 09:34

      11

      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!

      +1
  • Alex

    Thursday, August 15th, 2013 01:47

    21

    Very impressive man…I really love all your tutorials. Very easy and i learn a lot. Thanks.

    0
  • Rootvik

    Wednesday, July 31st, 2013 08:50

    19

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

    0
  • Shanna

    Monday, July 22nd, 2013 07:21

    18

    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

    0
  • Brad pit

    Monday, July 15th, 2013 08:10

    17

    nice tutorial, we want to implemnt it in our site

    0
  • Arshad Khan

    Tuesday, July 2nd, 2013 19:37

    16

    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?

    0
  • Jonath Lee

    Monday, June 17th, 2013 21:59

    15

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

    0
  • Sebastian

    Sunday, June 9th, 2013 09:24

    14

    Transform not work on chrome

    0
  • Awais Raza

    Wednesday, May 29th, 2013 11:31

    12

    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.

    0
  • Alex

    Sunday, May 26th, 2013 08:54

    9

    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

    0
    • Stephen

      Saturday, June 1st, 2013 22:06

      13

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

      0
  • Arunshory

    Saturday, May 25th, 2013 05:39

    8

    It is very simple and professional theme. Zooming effect is good for the particular price plan. Very nice.

    -1
  • Tahmid

    Saturday, May 25th, 2013 01:01

    7

    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.

    -1
  • Lester Gonzales

    Friday, May 24th, 2013 22:23

    6

    Thanks Dude!

    0
  • Stefani

    Friday, May 24th, 2013 18:45

    5

    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

    +3
    • Christian Vasile

      Monday, May 27th, 2013 09:33

      10

      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.

      +2
    • rohit

      Friday, August 9th, 2013 12:29

      20

      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.

      0
  • Chris

    Friday, May 24th, 2013 17:52

    4

    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!

    +1
  • Armands

    Friday, May 24th, 2013 16:00

    3

    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!

    +1
  • Martha

    Friday, May 24th, 2013 14:03

    2

    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!

    0
  • Richard

    Friday, May 24th, 2013 13:43

    1

    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.

    -1
    • Christian Vasile

      Monday, May 27th, 2013 09:34

      11

      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!

      +1

Comments are closed.

54.196.206.80 - unknown - unknown - US