...

View Full Version : Form button background image



F-b0mb
04-11-2009, 01:34 AM
Hello, I would like to make the form submit button look the way way I have styled my links on this page (http://dracochess.uuuq.com/). I don't know how to get rid of the borders for one thing. My css may be kind of a mess too but it validates except for the -moz-border-radius/-webkit-border-radius and warnings about floated element widths. The stylesheet that covers the links and buttons is here (http://dracochess.uuuq.com/boardstyle.css). In case you don't feel like looking there, here is my links css that I would like the button to look like:

#invertbutton {color: rgb(68,53,0);
display:block;
background: transparent url("img/invertbutton.png") no-repeat top left;
width: 111px;
height:18px;
margin: 10px auto;
font-size: .75em;
font-weight:bold;
text-decoration: none;
vertical-align: middle;
padding-top:3px;
}
#invertbutton:hover {background: transparent url("img/invertbutton.png") no-repeat 0 -21px;
color: #fff;
}
#invertbutton:active {background: transparent url("img/invertbutton.png") no-repeat 0 -42px;
color: rgb(186,3,3);
padding-top:4px;
height:17px;
}
Thanks for any help you can offer.

Excavator
04-11-2009, 02:09 AM
Try this F-b0mb,


#chatsubmit {
width: 111px;
height:24px;
padding: 0 0 5px 0;
float:right;
color: rgb(68,53,0);
background: transparent url("img/invertbutton.png") no-repeat top left;
font-size: .75em;
font-weight:bold;
text-decoration: none;
}
#chatsubmit:hover {
background: transparent url("img/invertbutton.png") no-repeat 0 -21px;
color:#fff;
}


You might play with that height and padding some more to get it closer.

Excavator
04-11-2009, 02:20 AM
Oops.
Sorry, forgot about the border.
Have a try with this -

#chatsubmit {
width: 111px;
height:21px;
padding: 0 0 5px 0;
float:right;
border: none;
color: rgb(68,53,0);
background: transparent url("img/invertbutton.png") no-repeat top left;
font-size: .75em;
font-weight:bold;
text-decoration: none;
}
#chatsubmit:hover {
background: transparent url("img/invertbutton.png") no-repeat 0 -21px;
color:#fff;
}

F-b0mb
04-11-2009, 03:11 AM
Thanks Excavator! I guess I was trying to make it more difficult than it needed to be.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum