How to Make Simple 3D Buttons Using Only CSS and HTML

30 Mar 2010

Here’s a very simple tutorial on how to make a button using just CSS and HTML.

Well what exactly is a button (in terms of computing)? A button is defined as an element in the graphical user interface (GUI) which provides the user a way to trigger an event like querying in a search engine or submitting a contact form. A typical button is a rectangle or rounded rectangle with text in it usually describing the use or function of the button. And that’s exactly what I’m going to create using CSS and HTML.

Nowadays most buttons you see online are some sort 3D as this enhances the user interface design and also captures the user’s attention, hence also making a 3D button more user-friendly than a flat 2D button.

Note: If you’re not using Mozilla Firefox, Chrome, Safari or Konqueror, you won’t see any text shadows or rounded corners.

Now, look at these 2 buttons:

Button Good and Button Bad

Now which one looks more appealing to you? The first one right. Why? Because it has the 3D effect! And rounded corners too. And shadows. No graphics involved, just plain CSS. The CSS properties that are responsible for the sweet 3D look are text-shadow, -moz-border-radius, -webkit-border and border.

Here’s how you create that button (without using a CSS stylesheet):

<span style = "padding: 5px 20px; font-weight: bold; background: #0079ce;
color: #fff; -moz-border-radius: 20px; -webkit-border: 20px;
text-shadow: #00487a 0px -1px 0px; border-bottom: 1px solid #333;
border-right: 1px solid #333; letter-spacing: 1px">Button Good</span>

So if you integrate it with a link, it would be like:

<a href = "/index.php"><span style = "padding: 5px 20px; font-weight: bold;
background: #0079ce; color:#fff; -moz-border-radius: 20px; -webkit-border:
20px; text-shadow: #00487a 0px -1px 0px; border-bottom: 1px solid #333;
border-right: 1px solid #333; letter-spacing: 1px">Button Good</span></a>

And here’s how you should do it (using a CSS stylesheet):

.myBtn a {
     padding: 5px 20px;
     font-weight: bold;
     background: #0079ce;
     color: #fff;
     -moz-border-radius: 20px; /* for rounded corners in Firefox */
     -webkit-border: 20px; /* for rounded corners in Safari */
     text-shadow: #00487a 0px -1px 0px; /* for the 'engraved text' effect */
     border-bottom: 1px solid #333;
     border-right:1px solid #333;
     letter-spacing: 1px

[adsense]And that’s it! Simple.

However, only Firefox, Chrome, Safari, Opera, Konqueror and iCab browsers support the text-shadow CSS property.

And for the rounded corners, current compatible browsers are Firefox, Chrome and Safari.

Both CSS properties aren’t supported by Internet Explorer…

Why, IE why? Aren’t you guys doing something to keep up with the world? Microsoft, what are you guys doing?! Haha! Anyway… it doesn’t really matter. Mozilla Firefox will conquer the Internet! ;-)

Author - Azhar Kamar
3 Comments Revolving around this Article
  1. DEAN says: Canadian Health&Care.Best quality drugs.Special Internet Prices.No prescription online pharmacy. Low price drugs. Order pills online

    Buy:Super Active ED Pack.Viagra Professional.Viagra.Viagra Super Force.Cialis Soft Tabs.Soma.VPXL.Zithromax.Levitra.Tramadol.Cialis Professional.Maxaman.Cialis.Viagra Super Active+.Cialis Super Active+.Viagra Soft Tabs.Propecia….

  2. Azhar Kamar says:

    Yeah, use Mozilla Firefox. There’s sooo many things Firefox can do that IE can’t. Trust me, you’ll fall in love with Firefox.

    And thanks. ;-)

  3. Joey Rolan says:

    i was wondering how some buttons have that text shadow effect yet they’re text. so now i know. i should stop using ie. some websites look so much better in firefox. thanks for sharing, i will surely have to use this code someday.

Write a Comment! NOW! :)

Current ye@r *