Toggle Button Link in html/css

Admin 1
Viewed 264

I have the following code:

    document.addEventListener("DOMContentLoaded", function(event) { 

(function() {
  requestAnimationFrame(function() {
    var banner;
    banner = document.querySelector('.exponea-banner3');
    banner.classList.add('exponea-in3');
    return banner.querySelector('.exponea-close3').addEventListener('click', function() {
      return banner.classList.remove('exponea-in3');
    });
  });

}).call(this);
});
*, *:after, *:before {
  box-sizing: border-box;
}

/*=====================*/
.checkbox {
  position: relative;
  display: inline-block;
}
.checkbox:after, .checkbox:before {
  font-family: FontAwesome;
  font-feature-settings: normal;
  -webkit-font-kerning: auto;
          font-kerning: auto;
  font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
}
.checkbox label {
  width: 90px;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
}
.checkbox label:after {
  content: '';
  position: absolute;
  width: 50px;
  border-radius: 100%;
  left: 0;
  top: -5px;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.checkbox input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.checkbox input:checked + label:after {
  left: 40px;
}

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 42px;
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
}
.model-7 .checkbox input:checked + label {
  border-color: #04c6db;
}
.model-7 .checkbox input:checked + label:after {
  background: #04c6db;
  left: 50px;
}


/*banner*/
/* Banner*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html3,
body3 {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.exponea-banner3 {
 
  font-family: Roboto, sans-serif;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #2e364d;
  color: #ebeef7;
  padding: 30px 80px 30px 35px;
  font-size: 16px;
  line-height: 1;
  border-radius: 5px;
  box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
  opacity: 0;
  transition: opacity 0.2s;
  display: none;
}
.exponea-banner3.exponea-in3 {
  opacity: 1;
  transition-duration: 0.4s;
}
.exponea-banner3 .exponea-close3 {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  font-size: 25px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.75;
}
.exponea-banner3 .exponea-label3 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner3 .exponea-text3 {
  margin-bottom: 8px;
}
.exponea-banner3 .exponea-count3 {
  font-weight: 500;
  display: flex;
  align-items: center;
}
.exponea-banner3 .exponea-label3 {
  text-align: left;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner3,
.exponea-close3,
.exponea-text3,
.exponea-label3,
.exponea-label3 {
    z-index: 10;
}
.open3 {
  display: block;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
        <link href="banner.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

<!-- First -->
    <div class="exponea-banner3 open3">
        <div class="exponea-close3">
            &times;
        </div>
        <div class="exponea-text3">
            Hi There! Thanks For Stumbling Upon My Website!
        </div>
<div class="exponea-count3">

Want To Switch Website View?
<div class="model-7">
  <div class="checkbox">
    <input type="checkbox"/>
    <label></label>
  </div>
</div>

  </div>
        <div class="exponea-label3">
            - Hussain Omer
        </div>
    </div>





<script src="script.js"></script>
  </body>
</html>

I would like to add a link to the toggle button. For example, when the user clicks the button it should direct them to this link: https://noxiousdigitalclass.hussainomer.repl.co/

This is just an example, but how would I go about setting them up since the CSS is what controls the animation of the toggle button?

Expected Output

When the user clicks the toggle button, it should direct them to this link: https://noxiousdigitalclass.hussainomer.repl.co/

animation css html jquery javascript
2 Answers

If I correctly understand your question, when the user checks the checkbox, you want to redirect the user to an site. You’re right about the css, you will not be able to use css to redirect. An simple way to do this is by using on click events. Just replace your checkbox with this:

<input onclick="setTimeout(function(){location.href='https://noxiousdigitalclass.hussainomer.repl.co';}, 1000);" type="checkbox"/>

I’l explain the code, when you check the input, it will wait 1 second to let the animation play. Then after the second is over, it will go to the link you want it to go to.

Please tell me if this doesn’t work.

Full code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
        <link href="banner.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

<!-- First -->
    <div class="exponea-banner3 open3">
        <div class="exponea-close3">
            &times;
        </div>
        <div class="exponea-text3">
            Hi There! Thanks For Stumbling Upon My Website!
        </div>
<div class="exponea-count3">

Want To Switch Website View?
<div class="model-7">
  <div class="checkbox">
    <input onclick="setTimeout(function(){location.href='https://noxiousdigitalclass.hussainomer.repl.co';}, 1000);" type="checkbox"/>
    <label></label>
  </div>
</div>

  </div>
        <div class="exponea-label3">
            - Hussain Omer
        </div>
    </div>





<script src="script.js"></script>
  </body>
</html>
user_148144780

The best way to do this would be inside the button tag you add the tag with it and between the tags you would put the word that shows up <button><a href="https://noxiousdigitalclass.hussainomer.repl.co/>BUTTON</a></button>

user_152925540
Related