HTML for 4 buttons w/ roll-over graphics WordPress
- SOLVED
See this site:
http://www.unlikelymillionaires.com
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:
Home
Programs
Videos
Contact
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.
Patrick.
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
<style>
.button {
width:212px;
height: 56px;
line-height: 56px;
text-align:center;
display:inline-block;
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 }
</style>
<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="http://brandonmathis.com/projects/fancy-buttons/"]]http://brandonmathis.com/projects/fancy-buttons/[[/LINK]]
The demo
[[LINK href="http://brandonmathis.com/projects/fancy-buttons/demo/"]]http://brandonmathis.com/projects/fancy-buttons/demo/[[/LINK]]
The code
[[LINK href="https://github.com/imathis/fancy-buttons"]]https://github.com/imathis/fancy-buttons[[/LINK]]
