How do I make this CSS animated switch take me to a link page?

HTML & CSS
,
1

Hi there,
I have this html and css code(did not make it) that is a animated switch. I’d like the switch, once activated and the switch moves down (click release) to take me to another page.
I’m not sure how to do this in the HTML?
The new page would open in target=" _blank"; :slight_smile:
I’m learning and playing with HTML, CSS and JS.

<div class="switchbox">
          <label class="switch">
           < input class="chk" type="checkbox">
            <span class="slider"></span>
          </label>
 </div>

/* The switch - the box around the slider */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 1.2em;
    height: 3.3em;
  }
  
  /* Hide default HTML checkbox */
  .switch .chk {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(230, 0, 0);
    transition: .4s;
    border-radius: 5px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: .5em;
    width: 2.4em;
    border-radius: 5px;
    left: -0.6em;
    top: 0.2em;
    background-color: rgb(68, 66, 66);
    box-shadow: 0 6px 7px rgba(0,0,0,0.3);
    transition: .4s;
  }
  
  .slider:before, .slider:after {
    content: "";
    display: block;
  }
  
  .slider:after {
    background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%,
          repeating-linear-gradient(90deg,rgb(78, 78, 78) 0,rgb(141, 135, 135),rgb(97, 96, 96) 20%,rgb(97, 95, 95) 20%,rgb(99, 99, 99) 40%) 0 50% / 50% 100%,
          radial-gradient(circle at 50% 50%,rgb(95, 94, 94) 25%, transparent 26%);
    background-repeat: no-repeat;
    border: 0.25em solid transparent;
    border-left: 0.4em solid #464646;
    border-right: 0 solid transparent;
    transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
    transform: translateX(-22.5%) rotate(90deg);
    transform-origin: 25% 50%;
    position: relative;
    top: 0.5em;
    left: 0.55em;
    width: 2em;
    height: 1em;
    box-sizing: border-box;
  }
  
  .chk:checked + .slider {
    background-color: limegreen;
  }
  
  .chk:focus + .slider {
    box-shadow: 0 0 1px limegreen;
  }
  
  .chk:checked + .slider:before {
    transform: translateY(2.3em);
  }
  
  .chk:checked + .slider:after {
    transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em);
  }
2

Welcome to this forum.

You could open a new page in a new tab as soon as the switch is clicked, but then you may not see the animation before the new tab opens. I therefore suggest you use JavaScript to delay the opening of the new tab until the end of the animation.

In the CodePen below I have increased animation time tenfold to clearly demonstrate that the new tab does not open immediately.

1 Like
3

Thanks for the greeting! And thanks so much for the JS code.
So I see how you increased the time in the CSS and I like what you did with the JS code! this is great!
I’ve already implemented your code. and am using the switch on a home page as an Easter egg, that leads to a new page with a hint for the visitor to enter a secret code, that then takes them to my meme vault.
your JS code works great with a desktop or laptop, but with an iPad once you click on the switch it goes down then returns to the top position and doesn’t open the new page. Do I need to decrees the delay time?
You said it could also be done with HTML Can you show me how? I love to learn how thing work!!

Thanks
Glen

4

From a quick search, others have been having trouble with window.open() on Safari browsers, although this may be due to popup blocking. Do you really need to use _blank to open a new tab (typically)?

I was hoping this would work when you click on the switch but it doesn’t :grinning: :

<a href="https://google.com" target="_blank">
  <div class="switchbox">
    <label class="switch">
      <input class="chk" type="checkbox">
      <span class="slider"></span>
    </label>
  </div>
</a>

From what I can work out, the click event does bubble up to the <a> element, but it seems that the link is disabled by the click event having changed the checkbox.

(Note: without added CSS, the <a> element is wider than the switch and the link works if you click to the right of the switch)

5

Thanks again for the info much appreciated! The reason I like opening page links in a new tab is, I don’t like to have navbars, dropdowns, slide outs or hamburger menus on each page. But that’s just me LOL.

Here is the website with the switch being used as an Easter Egg. The switch is at the very bottom of the page. I was asked to volunteer to make a new site for the RC airplane flying club I belong to.
My first site that I have made in the last 24 years. Big relearning curve, lots has changed in 24 years LOL.
https://hhmfc.ca/indexed.html