Toggle Button Link in html/css
Question
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"> ×. </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/
2 answers
solution1
1 ACCPTED 2021-02-26 20:20:16
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">
×
</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>
solution2
0 2021-02-26 20:16:48
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.