How to Create CSS3 Buttons

How to Create CSS3 Buttons [Tutorial]

Topic: CSS3
Difficulty: Beginner
Estimated completion time: 30 mins

In this tutorial we will be making some cool CSS3 buttons. They are based on the Futurico User Interface by Vladimir Kudinov and we will try to make a precise copy of them. Let’s get started…

Step 1 – HTML

The HTML is very simple, we’ll just create 3 anchor tags with the class of ‘button’ and since we will create three different colors styles we will give to each link a different color class

SEE ALSO: Creating a Scalable SVG Infographic

<a href="#" class="button green">button</a>

<a href="#" class="button blue">button</a>

<a href="#" class="button gray">button</a>

Step 1 Preview

Step 2 – Basic CSS Styling

Now we will start to give the basic shape and styles for the buttons. We’ll use the ‘display: inline-block’ property to be able to use it as a block element and to tolerate others HTML elements next to it. The others properties are basic CSS2 styles, you should not have difficulty to understand them.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

.button {
	display: inline-block;
	position: relative;
	margin: 10px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	font: bold 12px/25px Arial, sans-serif;
}

Before getting in the CSS3 part let’s just add some basic background and text colors for each color style.

.green {
	color: #3e5706;
	background: #a5cd4e;
}

/* Blue Color */

.blue {
	color: #19667d;
	background: #70c9e3;
}

/* Gray Color */

.gray {
	color: #515151;
	background: #d3d3d3;
}

Step 2 Preview

Step 3 – CSS3 Styling

Let’s start the fun part! Now we’ll add the rounded corners, shadows, and basic animations. You will notice that we will use various prefixes for each browser. This is required because this properties are in tests in some browsers and we need to add prefixes to target them

.button {
	display: inline-block;
	position: relative;
	margin: 10px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	font: bold 12px/25px Arial, sans-serif;

	text-shadow: 1px 1px 1px rgba(255,255,255, .22);

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;

	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
	box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}

Step 3 Preview

Step 4 – CSS3 Background Colors

In this part we’ll add CSS3 background gradients for each color style. If you want to create more background gradients just change the colors

/* Green Color */

.green {
	color: #3e5706;

	background: #a5cd4e; /* Old browsers */
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}

/* Blue Color */

.blue {
	color: #19667d;

	background: #70c9e3; /* Old browsers */
	background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
	background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}

/* Gray Color */

.gray {
	color: #515151;

	background: #d3d3d3; /* Old browsers */
	background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
	background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}

Step 4 Preview

Step 5 – Create Big Buttons

To create the big buttons style we’ll add a ‘big’ class and a span tag with some text.

HTML

<a href="#" class="button big green">sign in <span>One minute</span></a>

<a href="#" class="button big blue">sign in <span>One minute</span></a>

<a href="#" class="button big gray">sign in <span>One minute</span></a>

CSS

/* Big Button Style */

.big {
	padding: 0 40px;
	padding-top: 10px;
	height: 45px;
	text-transform: uppercase;
	font: bold 20px/22px Arial, sans-serif;
}

.big span {
	display: block;
	text-transform: none;
	font: italic normal 12px/18px Georgia, sans-serif;
	text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}

Step 5 Preview

Step 6 – Hover and Active State

For the hover and active sate we’ll just edit the box-shadows.

Hover

.button:hover {
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
	box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}

Hover State Preview

Active

.button:active {
	-webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
	-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
	box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}

Active State Preview

Conclusion

That’s it! We’ve finished our CSS3 buttons. Hope you like it and don’t forget to live some feedback in the comments.

Preview

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Futurico PRO

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Newsletter

14 Comments
  1. Prodyot Feb 1, 8:21 am

    Awesome.
    Just what I was looking for to learn how to design “awesome” buttons in CSS3.
    Thnaks for sharing.

    Reply
    0
  2. James Feb 2, 1:13 pm

    Great write-up!

    We always try to use CSS Buttons where possible. It’s so much better for page loading times, dynamicism (Hey – a new word there!) and content management systems.

    Unfortunately, some people still use IE, and worse – a lot of UK Public Sector organisations are still running IE5 or 6. This can prevent CSS from displaying as the designer intended and makes a hell of a lot more work for us folk.

    When will they learn?

    Reply
    +2
    • Valeriu Feb 2, 9:22 pm

      Yeah IE sucks for Web Designers, but you can use CSS3 buttons but IE users will not see the CSS3 features (gradients, shadows, etc.) .

      Reply
      0
      • Mozi Feb 11, 8:25 am

        Yeah as a designer I agree IE sucks :( but it is really nice work with CSS3.

        Reply
        0
  3. Leo Costa-Leite Feb 7, 3:45 am

    great tutorial, just tried it out. Freakin amazing and pretty simple if it wasn’t for all the fallbacks needed for different browsers

    Reply
    0
  4. Daisopa Feb 7, 9:37 am

    That ‘s a great tutorial ,I will be reproduced on my blog.

    Reply
    0
  5. Agnel Waghela Feb 10, 6:48 pm

    Awesome Tutorial… enjoyed making those cool CSS3 buttons… Soon I’ll use on my site…
    Thank you Valeriu Timbuc very much… Expecting more of these…

    Reply
    0
  6. Niall Feb 15, 2:53 am

    Cool stuff. Useful seeing fallbacks in the code for a change!

    Reply
    0
  7. Prince Feb 26, 12:32 am

    This is completely awesome!!!!!!

    I ran into issues applying this to actual buttons. Do you know how to make this work same effect for buttons?

    Reply
    0
  8. Rakes May 30, 8:43 am

    Great work! I was looking for CSS3 buttons for my new website, and it really helped.

    Reply
    0
  9. Dhaval Jun 8, 8:06 am

    Awesome Tutorial, I was looking for how to design “awesome” buttons in CSS3.
    Thnaks for sharing.

    Reply
    0
  10. James Jul 20, 2:59 pm

    Great work! But there is a problem. If you need change background (linear-gradient) on hover state, then the button will be blink…

    Reply
    0
  11. Adam Dec 31, 1:01 pm

    Very good tutorial. I also like to reverse gradients on buttons on active state. It makes simple but pretty good effect.

    Reply
    +1
  12. Evy Mar 17, 3:21 pm

    Thank you thank you thank you!
    This is exactly what I was looking for. Hope I get it done :)

    Reply
    -2

Leave a Reply

*
* Minimum length: 20 characters