Question

I am using images that look like buttons as a background on links and style text over the image as follows:

HTML:

<div><a href="/link_somewhere.php" class="plainButton">Button Text!</a></div>

CSS:

.plainButton{
background:transparent url('../images/btnPlain.png') no-repeat;
display: inline-block;
font-family:"Calibri", "Trebuchet MS", Helvetica, sans-serif;
width:100px;
height:25px;
color: #FFF !important;
font-weight:bold;
font-size:1.1em;
text-decoration:none !important;
text-align:center;
vertical-align: middle;

}

I have an existing form (with horrible image that I’m trying to replace) that uses an input image
HTML:

<input type="image" id="btnSubmit" name="btnSubmit" src="images/btnPlain.png"/>

How can I reuse what I have so that all of my “buttons” are the same?

Answer 1

Either add that same class to your inputs of type submit, a, and button

or

make a rule in css applying it to those said elements.
Fiddle here: http://jsfiddle.net/QbLxe/