Create a Sleek CSS3 Button Under a Minute
Posted by JP on December 2nd, 2010 in Coding | 30 Comments
As a web developer we often find ourselves creating buttons for submit buttons, links and more. Doing this the old fashioned way can take a lot of time as you need to open photoshop and create that gradient background, shadow effects etc.
In this tutorial I'm going to show you how to create a very sleek web 2.0 CSS3 button in under a minute.
We're going to start by creating the button in basic CSS.
border: 1px solid #5d9046; background: #67AA25; color: #fff; text-transform: uppercase; font-family: Arial, Helvetica, Sans-Serif; text-decoration: none; width: 156px; font-size: 14px; font-weight: bold; padding: 8px 0; text-align: center; display: block;
This is going to give us a very simple square button as illustrated below:
Pretty boring huh? Let's style it up a little bit :D
Creating Rounded Corners
Now that we've created the basic button, we can create rounded corners easily thanks to CSS3.
Simply add the following code into your button class to create the rounded corners.
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Now our button looks like this:
Thanks to CSS3 you can easily add shadows to your boxes or text. I've pasted some code below to give your button even more style:
text-shadow: 1px 1px 1px #666; -moz-box-shadow: 0 1px 3px #111; -webkit-box-shadow: 0 1px 3px #111; box-shadow: 0 1px 3px #111;
This code adds shadow to our text, and to our buttons. Neat huh?
Creating a Gradient Background for our Button
Using the gradient editor, I've created my background and the editor compiled the following code for me to use:
background: #3F8EB5; /* old browsers */ background: -moz-linear-gradient(top, #3F8EB5 0%, #1D76A0 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3F8EB5), color-stop(100%,#1D76A0)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F8EB5', endColorstr='#1D76A0',GradientType=0 ); /* ie */
It falls back wonderfully so you don't have to worry about older browsers not seeing your button etc.
Below you can see the end result of our button:
Now you can go ahead and add
:active pseudo-classes to bring the button even more to life.
I hope you guys enjoyed this tutorial!
Feel free to leave comments below
- 6 CSS Tutorials That Take You From Beginner to Expert
- Getting the Most Out of Your Blog’s RSS Feed
- Automatically Create a Bit.ly URL for WordPress Posts
- 10 Ways to Instantly Speed Up Your Website