Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

HTML for 4 buttons w/ roll-over graphics WordPress


See this site:

Below the video are 3 buttons. Notice that the images include a white margin above and below the button graphic.

I need to get new button graphics that match the site theme. I also need the roll-over graphics where the buttons turn dark grey with white lettering. I need the graphics for 4 buttons:


So, there should be 8 images in total.

Finally, I need the HTML code to add them to the site. Please send the graphic images (optimized for the web) along with the HTML code (in a text file).

Thank you.


Answers (3)


Kannan C answers:

You can try Luis solution. Otherwise, I can help you with the graphics and css if you increase the prize money to 30.

g8patrick comments:

Sorry. Sticking with $10. Let me know.

Kannan C comments:

Alright then, i will give you a css solution for this. Try this

.button {
height: 56px;
line-height: 56px;
background: #eee;
border:1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
margin: 0 7px;
a.button { color:#666; font-size: 28px; font-weight:bold; text-decoration:none }
a.button:hover { background: #333; color:#fff }
<a href="#" class="button">Contact</a>
<a href="#" class="button">Programs</a>
<a href="#" class="button">Videos</a>
<a href="#" class="button">Home</a>

Kannan C comments:

I forgot, if you want all 4 buttons to line up in same line, you can reduce the width in the css in order to give room for the 4th.

width:212px; //reduce this to whatever.

g8patrick comments:

This is tremendous! Thank you. You just solved my problem.

Kannan C comments:

Glad to help you. Don't forget to vote the answer!


Luis Abarca answers:

This can be done with Fancy buttons, you dont need to use images for the rollover effect.

The info
[[LINK href=""]][[/LINK]]

The demo
[[LINK href=""]][[/LINK]]

The code
[[LINK href=""]][[/LINK]]


Arnav Joy answers:

please see this hover image if you like it then I will mail you all..