How to Create 3D Buttons Using CSS

Text Buttons that Look like Graphical 3D Buttons


How to Create 3D Buttons Using CSS

by Christopher Heng, thesitewizard.com

Cascading Style Sheets, or CSS, can be used to create a wide variety of visual effects. For example, it is possible to create a button that looks three dimensional (3D) but is actually pure text. The 3D protruding effect is produced using CSS. This article describes two ways in which you can produce a 3D text button using CSS, without using any graphics.

Prerequisites

This article assumes that you have a working knowledge of CSS. You don't have to be a guru or anything like that, but you must at least have a basic understanding of CSS, how to insert CSS code into your web page and apply CSS to various HTML elements.

If you don't have a website and are here to survey the field (so to speak), you may find the article How to Start / Create a Website: The Beginner's A-Z Guide more relevant to your needs. It takes you through the steps of creating your own website and assumes no knowledge on your part.

Ways to Create a 3D Button Effect with CSS

There are probably a number of ways which you can use to create text buttons that look like they are graphical 3D buttons using CSS alone. I will describe two ways in this article.

  1. Using the "Inset" and "Outset" Border Styles in CSS

    The simplest way of creating a 3D effect for your buttons is to use a facility provided by CSS for this very purpose. Take the following snippet of code, generated by the CSS Navigation Menu Bar Buttons Wizard, as an example:

    #tswcssbuttons li a {
      color: #000 ;
      background-color: #ffb200 ;
      border: 1px outset #b37d00 ;
      width: 180px ;
      text-decoration: none ;
      display: block ;
    }
    

    Look at the line "border: 1px outset #b37d00 ;". It specifies that the button is to be 1 pixel thick, have a colour value of "#b37d00", and have the "outset" property. The "outset" property for the border-style is what makes the button look as though it is protruding from the web page. In other words, it makes the block look like it is a button that can be pressed.

    CSS also has another property for borders called "inset", which as its name suggests, makes the button look as though it is depressed.

    If you have a modern web browser, you should be able to see the effect of such CSS properties on the sample menu bars on the CSS Menu Bar Wizard page. If the effect of the protrusion or depression is not very obvious in the wizard, it's probably because I only used 1 pixel for the border. The effect will be more pronounced if you use a thicker border (for example 2 pixels).

    You probably got a hint of the downside of using the technically correct CSS property for this effect from my above paragraph. Very old browsers like Internet Explorer 6 and 7 simply display the outset and inset borders as though they were solid borders, resulting in a normal looking button that does not protrude from the web page. However, since users of those browsers are now the minority on the Internet, you probably don't have to worry about them. In any case, it's only a minor visual effect, so even if your site has the occasional straggler using those browsers, it's unlikely that they'll even notice anything.

    How to Create a Button with the Inset or Outset Property

    It's very simple to create a 3D button with the inset or outset property. For any piece of text that you want to make into a button, give it some background colour and set a border-style with the appropriate property ("inset" or "outset").

    Let's say you want to make the text "Home" into a button. In the block holding the text, set the following properties:

    color: black ;
    background-color: #ffb200 ;
    border: 1px outset #b37d00 ;
    

    To make it look visually like a button, your border colour, #b37d00 in the above example, should be a shade of your background colour rather than some other random colour. The simplest way to do this is to experiment with various shades of your main background colour for the outset. Standards-compliant browsers will compute the correct colours for the different sides of your button from the colour you supply here.

  2. Manually Creating the 4 Borders of a Button to Create a 3D Button Effect

    Another way to create a 3D button effect is to manually specify the colours for all four borders of a button. At the time I write this, thesitewizard.com uses this method to create a button effect for its side panel. Let's take a look at the CSS code for one of these buttons:

    div.button {
      color: black ;
      background-color: #9cf ;
      border-top: 1px solid #c0ffff ;
      border-right: 1px solid #00f ;
      border-bottom: 1px solid #00f ;
      border-left: 1px solid #c0ffff ;
    }
    

    The main thing to note are the border-top, border-right, border-bottom and border-left styles. Notice that the top and left borders have the same colour, as do the bottom and right borders. Look carefully at the effect the settings have on the buttons on thesitewizard.com. The bottom and right borders are darker, making it look as though those borders are in the shadow, while the top and left borders are brighter, as though they have a light shining on them from the top-left corner. The end result is a 3D effect.

    When you use the "inset" and "outset" styles for your borders (as mentioned in the earlier step), the browser automatically takes care of the correct colours for you. Here, however, you're doing everything manually, so you'll have to figure out which colours work best to create the kind of button you want for your page. I suppose talented graphic artists can probably tell you instinctively which colours work best, but if you're anything like me, you'll just have to try different colours and check the effect on your web page to find the best combination.

    (As a side note, if you want to know how to make the button change colour when the mouse hovers over it, see the article How to Make Your Links Change Colour When the Mouse Hovers Over It.)

Conclusion

With the tips provided in this article on how to create 3D buttons using CSS, you're well on your way to making those text buttons with a 3D button effect for your website. Such buttons are very useful for side menus and are both usable (since they look like buttons that can be clicked on) and accessible (since they are text-based rather than image-based).

Copyright © 2008-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Create 3D Buttons Using CSS





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.