How do I add this to the HTML?

Hi,

I'm swapping to CSS buttons instead of DIV buttons, so I created this CSS button code:

    }.button {
    -moz-box-shadow: 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow: 0px 1px 0px 0px #ffffff;
    box-shadow: 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b6afae), color-stop(1, #948d8a) );
    background:-moz-linear-gradient( center top, #b6afae 5%, #948d8a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b6afae', endColorstr='#948d8a');
    background-color:#b6afae;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:normal;
    padding:7px 20px;
    text-decoration:none;
    text-shadow:1px 1px 0px #7c7c7c;


    }.button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #948d8a), color-stop(1, #b6afae) );
    background:-moz-linear-gradient( center top, #948d8a 5%, #b6afae 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#948d8a', endColorstr='#b6afae');
    background-color:#948d8a;


    }.button:active {
    position:relative;
    top:1px;
    }

Code (markup):

How do I write the HTML reference for it? This is no link, no DIV, not sure whether to add "class" or "id". I could only make the CSS.

What do I add to the HTML so that it shows up?

I'm currently refreshing the CSS/HTML codes of all my sites and I'm right now stuck with this one...

Thanks a lot in advance,

 

..meanwhile it worked as I treated it as a DIV

 

Try reading http://www.webdesignerdepot.com/2011/07/css-buttons-tutorials-and-examples/

 

it will be still on DIV, and to answer your question.

<div class="button">
</div>

 

That statement makes NO sense whatsoever -- since CSS needs SOME form of markup to be applied to -- though I would think you'd be targeting ANCHORS so that scripting off you have fallbacks, unless of course this is one of the uber rare "scripting only" elements (which means the element should be generated BY the script so it's not there and non-functional for people like myself who browse with scripting blocked by default).

Oh, NOT that I'd recommend using linear-gradient on hover states given how much cpu that hogs and the 'delay' in certain browsers like Firefox at changing the state. I'd probably suck it up and use a image instead... or see what I could pull off using an inset box-shadow.

 

Insert this code in CSS and call through Class.

 

Yes, you are right, they are DIVs anyway.

What I meant to say: swapping from image-backed DIV buttons to HTML-CSS-DIV buttons with gradient

I have many sites to re-code and optimize. This takes a lot of time and effort and potentially months of work.

Finally it worked - looks great, pages load much faster than with images.

 

Try this:

<button class="button">Submit</button>

 

<a class="button">Button Name</a>

 

<a class="button">Button Name</a>

 

<div class="button">Button Text</div>

<a class="button" href="link.html">Button Text</a>

<button type="button" class="button">Button Text</button>

 

Yes, yes... solved it a long time ago