How do I create an image rollover link using php and css - php

Question

I'm trying to create an image rollover button to place within a php file. The css is below...now what php script would I use to display the button?
#quotebutton {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
#quotebutton a:hover {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
background-repeat: none;
}

Answer 1

Why are you attempting to place this in a PHP file?
A couple of things off the bat tho:
You don't need the quotes in your CSS url("") tag. It can just be url(http://imagehere.com/sup.png)
The hover scope does not need to have every attribute re-defined. For example, you can just do this:
#quotebutton a:hover {
background-image: url(urlhere)");
}
Edit: Nikola has a more appropriate answer for implementation. I created an example for you of what Nikola's talking about however:
http://jsfiddle.net/XAtGP/
Cheers. :)

Answer 2

You can use html code, or php script that outputs the html code:
<a id="quotebutton" href="#">Quote</a>
In CSS, # stands for ID of some element.
If you are planning to use more than one such button on a single page, you should change #quotebutton to .quotebutton (with dot at the beginning) and use it like this:
<a class="quotebutton" href="#">Quote</a>
where . in CSS stands for CLASS of an element.
HTML classes can be used by many elements while ID is the unique identifier of the element and can't be used 2 times on the same page.

Answer 3

css: if anchor tag is nested within #quotebutton
#quotebutton>a{
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
#quotebutton>a:hover {
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
}
html example:
<div id="quotebutton">
<a herf="#"></a>
</div>
if not and #qoutebutton is the anchor the css is a follows:
a#quotebutton {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
a#quotebutton:hover {
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
}
html example:
<a id="quotebutton" href="#">quotebutton</a>