Home/ Questions/Q 8088639
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T19:09:05+00:00

I’ve created a button using HTML/CSS and a Java script. The button should direct

  • 0

I’ve created a button using HTML/CSS and a Java script. The button should direct someone to a different page, but it is not working. It works great in Chrome and Safari, but will not work in Firefox.

Can anyone help with code so that it works in Firefox and IE?

Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <title>WTF</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<style type="text/css">


button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

</style>

<body>

<button><a href="http://www.ihatelebronjames.com" class="button1">LEBRON IS A NO-GOOD, BACK-STABBING, AFRAID-OF-THE-MOMENT CHOKE ARTIST!</a></button><br>
<button><a href="http://www.lebronjames.com" class="button2">LEBRON IS THE PINNACE OF BASKETBALL PERFECTION!</a></button>            


</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A very easy fix is : 

    <a href="http://www.lebronjames.com" class="button2"><button>LEBRON IS THE PINNACE OF BASKETBALL PERFECTION!</button></a>

    Putting the button tag inside the a tag

    Another (and better practice ) option :

    http://jsfiddle.net/a6seL/

    Here we just add a class “button2” to the <a>. We then style it as you did with <button>, but to really get the button look we also add display : block to the class.

    Now you only need the <a> and no more <button>.

    See my jsfiddle for that.

    • 0