CSS Button
Create the look of a button in an html element such as a div or span.
cssfile.css
.button {
padding:5px 5px 4px 5px;
color:#555;
margin:0;
border:1px silver solid;
border-radius:3px;
background:#f8f8f8;
box-shadow:inset 1px 5px 8px #e9e9ea,inset -1px -7px 5px #ccc;
letter-spacing:1px;
display:inline-block;
cursor:pointer;
cursor:hand;
position:relative;
}
/* the next line simulates effect of being pushed */
.button:active {
top:1px;
}
Example 1, in-line:
<span style="padding:5px 5px 4px 5px; color:#555; margin:0; border:1px silver solid; border-radius:3px; background:#f8f8f8; box-shadow:inset 1px 5px 8px #e9e9ea,inset -1px -7px 5px #ccc; letter-spacing:1px; display:inline-block;"></span>
Produces this effect:
Example 2, stylesheet:
cssfile.css
.button {
padding:5px 5px 4px 5px;
color:#555;
margin:0;
border:1px silver solid;
border-radius:3px;
background:#f8f8f8;
box-shadow:inset 1px 5px 8px #e9e9ea,inset -1px -7px 5px #ccc;
letter-spacing:1px;
display:inline-block;
cursor:pointer;
cursor:hand;
position:relative;
}
/* the next line simulates effect of being pushed */
.button:active {
top:1px;
}
htmlfile.html
<span class="button">Simulated Button</span>
Produces this effect:
Example 3, button:
When a button is styled, the browser removes the default style. This css will replace the natural 3-d effect a button is expected to have.
<button type="button"></button>
This is the default style of a button. The browser supplies the style.
However, when a single style is applied to the button the browser removes the 3-d gradient effect and the rounded corners which creates the button look.
<button style="border:1px blue solid;" type="button"</button>
Notice now that the blue border is applied, all other style was removed, except a flat gray background.
Solution: Apply the css styling to add the 3-d look back to the button.
<button style="padding:5px 5px 4px 5px; color:#555; margin:0; border:1px blue solid; border-radius:3px; background:#f8f8f8; box-shadow:inset 1px 5px 8px #e9e9ea,inset -1px -7px 5px #ccc; letter-spacing:1px; display:inline-block;" type="button">Button</button>