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 The Beginner's A-Z Guide to Starting/Creating Your Own Website 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.
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:
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.