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 effectSimulated Button


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 effectSimulated Button


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>

 

Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use