2

This is my code before I add the link:

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
      display: inline-block;
      border-radius: 12px;
      background-color: #33ccff;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 22px;
      padding: 20px;
      width: 195px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 3px;
    }
    
    .button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    
    .button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
    
    .button:hover span {
      padding-right: 25px;
    }
    
    .button:hover span:after {
      opacity: 1;
      right: 0;
    
    
    }
    </style>
    </head>
    <body>
    
    <button class="button" ><span>DOWNLOAD </span></button>
    
    </body>
    </html>

It looks like this:

DOWNLOAD Button

I want to add a link to the code so when I press the button it redirects me to a different website. I tried to add a link to my button, but the button was smaller, it has a gray background and the text was black. Also, when I click on it, it didn't take me to the website that I wanted it to take me.

I found this one post right here: Add URL link in CSS & Html to button, but I really don't know what the .ui-state-highlight class means or where I should keep it.

Could you please show me how to add a link to the button code above so when I press on the button, it redirects me to a different website. Thanks!

Neuron
  • 5,141
  • 5
  • 38
  • 59
Farmer Joe
  • 31
  • 4

3 Answers3

1

Here is a plunker:

.button {
  display: inline-block;
  border-radius: 12px;
  background-color: #33ccff;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 22px;
  padding: 20px;
  width: 195px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 3px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;


}
<!DOCTYPE html>
<html>
<body>

<a href="https://stackoverflow.com" class="button" ><span>DOWNLOAD </span></a>

</body>
</html>

As you can see i changed the button element to an a element and added href attribute.

SupremeDEV
  • 384
  • 1
  • 15
1

Typically, a link tag would work better. Buttons are used for things such as submitting a form.

You can keep your css. Just change the button to be like so:

<a class="button" href="yourwebsitehere.com">DOWNLOAD</a>
parker_codes
  • 3,267
  • 1
  • 19
  • 27
0

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
      display: inline-block;
      border-radius: 12px;
      background-color: #33ccff;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 22px;
      padding: 20px;
      width: 195px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 3px;
    }
    
    .button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    
    .button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
    
    .button:hover span {
      padding-right: 25px;
    }
    
    .button:hover span:after {
      opacity: 1;
      right: 0;
    
    
    }
    </style>
    </head>
    <body>
    
    <button class="button" onclick="changeSite()"><span>DOWNLOAD </span></button>
    <script>
    function changeSite()
    {
      var siteName;
      siteName="https://www.google.com/";
      window.location.href=siteName;
    }
    </script>
    
    </body>
    </html>
AG_BOSS
  • 114
  • 10