CODEWITHSUNDEEP
imagebuttonstyles
Fredashay
Fredashay

Reputation: 1033

Style HTML "submit" buttons with images?

I'm wondering about graphics on form buttons.

I'm using form buttons instead of links because, well, they look nicer.

Instead of this:

 print ('<A HREF="vote.php?vote=up" REL="nofollow">Vote +</A>&nbsp;');
 print ('<A HREF="vote.php?vote=dn" REL="nofollow">Vote -</A> ');

I have this:

 print ('<TD VALIGN="center"> ');
 print ('<FORM METHOD="post" ACTION="vote.php?vote=up" REL="nofollow"> ');
 print ('<P ALIGN="CENTER"> ');
 print ('<INPUT TYPE="submit" VALUE="Vote +" /> ');
 print ('</P> ');
 print ('</FORM> ');
 print ('</TD> ');
 print ('<TD VALIGN="center"> ');
 print ('<FORM METHOD="post" ACTION="vote.php?vote=dn" REL="nofollow"> ');
 print ('<P ALIGN="CENTER"> ');
 print ('<INPUT TYPE="submit" VALUE="Vote -" /> ');
 print ('</P> ');
 print ('</FORM> ');

Now, in this case, I would like to use thumbs up and down symbols on the buttons, instead of saying "Vote +" etc.

Is there a way to do that?

Upvotes: 0

Views: 1320

Answers (2)

phsaires
phsaires

Reputation: 2378

css

<style>
.btn1 input.submit-button {
    width: 120px;
    background-image:url(/images/vote1.png);
    background-repeat: no-repeat;
    background-position: 3px center;
    padding: 5px;
.btn2 input.submit-button {
    width: 120px;
    background-image:url(/images/vote2.png);
    background-repeat: no-repeat;
    background-position: 3px center;
    padding: 5px;
</style>

Code

print ('<INPUT TYPE="submit" VALUE="Vote +" class="btn1" /> ');

print ('<INPUT TYPE="submit" VALUE="Vote -" class="btn2" /> ');

Upvotes: 1

Kevin LaBranche
Kevin LaBranche

Reputation: 21088

You can use CSS to style buttons including using an image. Here are some tutorials to help you out on this.

http://www.tyssendesign.com.au/articles/css/styling-form-buttons/

http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

Upvotes: 1

Related Questions