CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
Yoann Pageaud
Yoann Pageaud

Reputation: 519

HTML - compatibility with Internet Explorer and Firefox for Button

I made a chunk of code for a html button that link to a website I did.
I made the button following w3 school tutorials.
It is working when browsing with Chrome, Edge, and Safari, unfortunately it is not the case with Internet Explorer 11 and Firefox Quantum (58.0)...
To be more clear, the button is displayed correctly, but clicking on it do not load the website page.

Here is my code: 

<!DOCTYPE html>
<head>
   <style type="text/css">
      .bluebutton {
      padding: 10px;
      width: 100%;
      font-size: 200%;
      margin-left: auto;
      margin-right: auto;
      background-color: #337ab7;
      border-radius: 7px;
      box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2), 0 3px 20px 0 rgba(0,0,0,0.05);
      }  
      .bluebutton:hover {background-color: #3e8e41}
      .bluebutton:active {
      background-color: #3e8e41;
      transform: translateY(5px);
      }
      .bluebutton span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
      }
      .bluebutton span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
      }
      .bluebutton:hover span {
      padding-right: 25px;
      }
      .bluebutton:hover span:after {
      opacity: 1;
      right: 0;
      } 
   </style>
</head>
<body>
   <button class="bluebutton">
   <a href="https://www.youtube.com" style="color: white">
   <span>Access Website</span>
   </a>
   </button>
</body>
</html>

If possible I would like to keep the css style part inside the html code. I would be grateful for you help.
Best regards,

Upvotes: 0

Views: 77

Answers (2)

Yoann Pageaud
Yoann Pageaud

Reputation: 519

So I finally found a solution to my problem !
First I would like to quote @Silverman42 who also had the same idea than me when I was trying to find an answer in the mean time: using <a> tag is the first key to solve the compatibility problem. It works for all web browsers cited in my question.
The other key was to replace the CSS style options width: 100%; , margin-left: auto; and margin-right: auto; by display: block; to create a block for the element and then just text-align: center to center back the text of the link on the button. See below complete solution that worked for me: 

<!DOCTYPE html>
<head>
   <style type="text/css">
      .bluebutton {
      display: block;
      text-align: center;
      padding: 10px;
      font-size: 200%;
      background-color: #337ab7;
      border-radius: 7px;
      box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2), 0 3px 20px 0 rgba(0,0,0,0.05);
      }  
      .bluebutton:hover {background-color: #3e8e41}
      .bluebutton:active {
      background-color: #3e8e41;
      transform: translateY(5px);
      }
      .bluebutton span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
      }
      .bluebutton span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
      }
      .bluebutton:hover span {
      padding-right: 25px;
      }
      .bluebutton:hover span:after {
      opacity: 1;
      right: 0;
      } 
   </style>
</head>
<body>
   <a href="https://www.youtube.com" class="bluebutton" style="color: white">
   <span>Access Website</span>
   </a>
</body>
</html>

Upvotes: 0

Silverman42
Silverman42

Reputation: 111

You could easily just do most of the button customization on the <a> tag without the need for using the <button>tag.

Upvotes: 1

Related Questions