logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$10
HTML for 4 buttons w/ roll-over graphics

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.

This question has been answered.

g8patrick | 01/25/12 at 12:21am Edit


The experts have suggested, on average, a prize of $30 for this question.

(3) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    01/25/12
    12:29am
    Luis Abarca says:

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

    The info
    http://brandonmathis.com/projects/fancy-buttons/

    The demo
    http://brandonmathis.com/projects/fancy-buttons/demo/

    The code
    https://github.com/imathis/fancy-buttons

  • avatar
    Last edited:
    01/25/12
    12:36am
    Kannan C says:

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

    • 01/25/12 12:41am

      g8patrick says:

      Sorry. Sticking with $10. Let me know.

    • 01/25/12 12:56am

      Kannan C says:

      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>

    • 01/25/12 1:06am

      Kannan C says:

      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.

    • 01/25/12 1:10am

      g8patrick says:

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

    • 01/25/12 1:16am

      Kannan C says:

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

  • avatar
    Last edited:
    01/25/12
    1:01am
    Arnav Joy says:

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

    attachment image View Attachment

This question has expired.



Josh Sauberman had additional discourse to offer.

Gabriel Reguly, idt, Julio Potier, Francisco Javier Carazo Gil, g8patrick voted on this question.



Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.