How To Make a CSS 3 Button

CSS 3 is being incorporated into web design more and more as we progress into the future of designing for the web. Browsers like Mozilla Firefox and Apple Safari are two of the main browsers that currently support some of what CSS 3 has to offer (unfortunately Internet Explorer is still trying to catch up).

With this said about CSS 3 being the future let’s put it to good use. CSS 3 has a number of new features that are just waiting to be tapped into but in this article we are just going to focus on what it can bring to the design table as far as making buttons are concerned.

I’m going to make a simple button using purely CSS 3.

Let’s start with a basic set up for a button:


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

Now the CSS:


a.button{
background: #7e7e7e;
color: #fff;
display: block;
font-size: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
height: 35px;
line-height: 35px;
width: 100px;
text-align: center;
text-decoration: none;
}

The CSS used above is standard today and can be seen by all current browser types. This is purely CSS 2 at work here – nothing special so far. Now let’s add the magic (in this case magic = CSS 3). We will be adding a border radius, box shadow, and text shadow . Here is the code:


a.button{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 2px 2px #ccc;
-moz-box-shadow: 0px 2px 2px #ccc;
-webkit-box-shadow: 0px 2px 2px #ccc;
text-shadow: 0px 1px 0px #333;
-moz-text-shadow: 0px 1px 0px #333;
-webkit-text-shadow: 0px 1px 0px #333;
}

Now you are probably wondering what the extra lines are under the CSS 3 attributes that start with –moz and –kebkit. These signify the browser engine that is rendering the CSS. –moz is for Mozilla Firefox and –webkit is for Apple Safari. Without these the browser won’t know to render the CSS (for text-shadow you probably don’t need it but put it in anyway). The reason for this is that CSS 3 is not fully integrated into browsers yet and requires you to tell the browser engine that is rendering the code to call its name out and tell it to. Eventually we won’t need these prefixes but for now they are necessary.

But I digress.

I’m going to add one last style to the mix for good measure – a bottom border. So all together we have this:


a.button{
background: #7e7e7e;
border-bottom: 1px solid #575757;
color: #fff;
display: block;
font-size: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
height: 35px;
line-height: 35px;
width: 100px;
text-align: center;
text-decoration: none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 2px 2px #ccc;
-moz-box-shadow: 0px 2px 2px #ccc;
-webkit-box-shadow: 0px 2px 2px #ccc;
text-shadow: 0px 1px 0px #333;
-moz-text-shadow: 0px 1px 0px #333;
-webkit-text-shadow: 0px 1px 0px #333;
}

Now as long as you are viewing this in Firefox, Safari, or some other CSS 3 rendering browser you should see this: (I have provided an image version for those without browsers that handle CSS 3).

css3 button

If you wanted you could even create a small gradient in Photoshop (or equivalent application) and add it to the button for more effect.

css3 button

And that’s it. Simple, right?

Here is a cheat sheet of all CSS 3 has to offer.

Now be wary when using CSS 3 in your designs. Remember that not all browsers support this so be sure that whatever you are designing works with and without the CSS 3 attributes you assign to it. Or you could just not care and do whatever the hell you want. wink

Zach Katkin
Zach Katkin
Zach Katkin is the co-founder & CEO of Atilus. He is a Certified Google Professional, author, and lover of technology. He helps Atilus stay out ahead of online marketing trends and loves driving results for Atilus' clients.

Leave a Comment

 

Recent Comments | 0 Comments
Recent Posts

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.