Categories Site Actions X

Making a simple button using CSS3

Posted on Monday, August 30th, 2010 in Other by Nick

With most modern browsers supporting CSS3 now, I figured I’d show you all how to make a simple button with CSS3. Please note that this is a quick how-to so you can see how it is done, not a full blown tutorial.

Lets get the basic style out there (no CSS3 yet)

padding:10px;
font-family:Arial;
color:#656565;
text-decoration:none;

Now we can start with the CSS3. First off, we have our background:

background: -moz-linear-gradient(center top, #f7f7f7 0%,#e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7f7f7),color-stop(1, #e0e0e0));

Next up is our border:

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

And finally we have our box shadow:

-moz-box-shadow: 1px 2px 0px #c1c1c1;
-webkit-box-shadow: 1px 2px 0px #c1c1c1;
box-shadow: 1px 2px 0px #c1c1c1;

The final product looks like this in FF 4:

HomeForumsMaking a simple button using CSS3

This topic contains 0 replies, has 1 voice, and was last updated by  Nick August 30, 2010 at 1:27 AM.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #3224

    Nick
    Keymaster
    • Offline

    With most modern browsers supporting CSS3 now, I figured I’d show you all how to make a simple button with CSS3. Please note that this is a quick how-
    [See the full post at: Making a simple button using CSS3]

    Please let me know about any site issues!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

Join the forum to add your own thoughts!