3D Effect on Buttons Using CSS
The more we care about the accessibility, the more we discover that it is possible to apply visual effects without the use of Flash, only with some knowledge of CSS (Cascading Style Sheets).
When we develop a website with the menu in Flash, this menu may not be accessible to all users, especially those who make use of screen readers. There are also users that disable the animations in the browser, or still that not have installed the same version of the player required to play the animation.
If the menu has any effect that can be played with HTML and CSS, using your creativity and some small tricks it is possible to improve the accessibility of the site and still leave it more lightweight.
In this mini-tutorial, we will apply a button effect 3D link, which will look pressed when the user pass the mouse over it, as in the example below:
Follow the step-by-step. Remember that it is necessary to have minimum knowledge of HTML and CSS to be able to apply the effect on your site and customize the appearance of your button.
Create your HTML file
Here is the code of a HTML file that will serve as example:
Here we are using a link instead of an ordinary button form
<input type=”submit” /> because the pseudo-class :hover does not work with the buttons in all browsers.
Create your CSS file
Now, it is necessary to create the CSS file corresponding. Here is the example of this tutorial:
The first block of statements in .botao3d
it is what makes the difference in this effect. The line display: block; defines which button will have the appearance of a block. The line border-color: #999 #000 #000 #999; sets the edges will be, clockwise, gray (#999), black (#000), black and grey. These values are customizable, but having the right and bottom edges in a darker color than the edges left and top is the that gives the appearance of 3D element. The other properties, such as border width, width element, background color, and font, are only an example and can be changed according to your layout.
In .botao3d:hover, we define the appearance of the element when the user hovers the mouse over it. The secret here is moving it down and to the right, by setting the element will have a relative position across the line position: relative;and that he will be hanging 1 pixel down (top: 1px;) and 1 pixel to the right (left: 1px;). It is also important to invert the color of the borders: to give the appearance of pressed, we set the edges right and bottom in gray, and the edges left and top in black.
Using your creativity, you can apply various the effects from this tutorial. You can for example set it as the background on a image gradient and apply the effect rollover, which uses exactly the same principle but works with the background image instead of the edge, and let this button with the metallic look.
If you want to download files that served as example in this tutorial for the study itself, click here (in ZIP format).