href syntax for a button (HTML)

Question

I have created a button, as shown below. Now I am working on linking it. However the href part seems to be out of order. Does anyone know how to link the button to a site (use https://aol.com). Thank you

<body>
    <div class="result15823794" style="width: 160px; height: 30px;     background-image:     url(&quot;http://static1.grsites.com/user/generate/items/button84799376.png&quot    ;);
    " onmouseover="this.style.backgroundImage =     'url(http://static1.grsites.com/user/generate/items/button76804217.png)'
    " onmouseout="this.style.backgroundImage =     'url(http://static1.grsites.com/user/generate/items/button84799376.png)'">
    <div style="background-image:     url(http://static1.grsites.com/images/0.gif); 
    width: 160px; height: 30px;"></div>
    </div>
</body>

Really close to http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link — Chris Happy, Apr 10 '17 at 00:42

score 1 · Accepted Answer · answered Apr 10 '17 at 00:44

onclick="location.href='https://aol.com/';"

Sample:

<body>
  <div onclick="location.href='https://aol.com/';" class="result15823794" style="width: 160px; height: 30px;     background-image:     url(&quot;http://static1.grsites.com/user/generate/items/button84799376.png&quot    ;);
        " onmouseover="this.style.backgroundImage =     'url(http://static1.grsites.com/user/generate/items/button76804217.png)'
        " onmouseout="this.style.backgroundImage =     'url(http://static1.grsites.com/user/generate/items/button84799376.png)'" onclick="location.href='https://aol.com/';">
    <div style="background-image:     url(http://static1.grsites.com/images/0.gif); 
        width: 160px; height: 30px;"></div>
  </div>
</body>

You rock @Chris Happy. This syntax works. I do appreciate your input. — Forma, Apr 10 '17 at 01:16

score 0 · Answer 2 · answered Apr 10 '17 at 00:58

0

you can wrap the outmost div with an anchor containing the href to AOL like this:

<a href="https://aol.com/"><div class="result15823794" style="width: 160px; height: 30px;     background-image:     url(&quot;http://static1.grsites.com/user/generate/items/button84799376.png&quot    ;);
    " onmouseover="this.style.backgroundImage =     'url(http://static1.grsites.com/user/generate/items/button76804217.png)'
    " onmouseout="this.style.backgroundImage =     'url(http://static1.grsites.com/user/generate/items/button84799376.png)'">
    <div style="background-image:     url(http://static1.grsites.com/images/0.gif); 
    width: 160px; height: 30px;"></div>
    </div></a>

answered Apr 10 '17 at 00:58

nineusa

1
1

Just FYI, it's not valid HTML to wrap block elements like `
` in inline-level elements like `` (even though a lot of sites do it).
– Ben Hull Apr 10 '17 at 01:18
Thanks @nineusa. I ran this code, but it did not show the button on my site – Forma Apr 10 '17 at 01:41
You're welcome - strange though it worked for me in Chrome OSX - it's ok I actually think Chris' answer s the right one, take care ;) – nineusa Apr 10 '17 at 04:35
Yes Benjamin you're right thanks the divs can be changed to a span tag and make everything valid. – nineusa Apr 10 '17 at 04:36

score 0 · Answer 3 · answered Apr 10 '17 at 01:41

<a href="https://aol.com" target="_blank">

add this after the body the <body> tag, then add the closing of the anchor tag before the closing </body> tag. Just like my code below.

<body>
    <a href="https://aol.com" target="_blank">
    <div class="result15823794" style="width: 160px; height: 30px;     background-image:     url(&quot;http://static1.grsites.com/user/generate/items/button84799376.png&quot    ;);
    " onmouseover="this.style.backgroundImage =     'url(http://static1.grsites.com/user/generate/items/button76804217.png)'
    " onmouseout="this.style.backgroundImage =     'url(http://static1.grsites.com/user/generate/items/button84799376.png)'">
    <div style="background-image:     url(http://static1.grsites.com/images/0.gif); 
    width: 160px; height: 30px;"></div>
    </div>
    </a>
</body>

href syntax for a button (HTML)

3 Answers3