0

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?

1
  • Or ... one could look at exiting site code ... Commented Apr 22, 2012 at 22:24

2 Answers 2

1

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/

Sign up to request clarification or add additional context in comments.

Comments

1

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" /> '); 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.