:toggle

CSS toggle-button without JavaScript.

by simurai

HTML

<!-- A more basic version of http://lab.simurai.com/css/toggle/ -->

<div id="toggle">
    <a class="bot" href="#"></a>
    <a class="top" href="#toggle"></a>
</div>

CSS

body { padding: 100px; background-color:#eee; }


#toggle {
    position: relative;
    width: 100px;
    height: 100px;
}
#toggle a {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50px;
}
#toggle .top { background-color: black; }
#toggle .bot { background-color: red; }

#toggle:target .top {
    opacity: .3;
    pointer-events: none;
}

JavaScript

// empty..!!!!





/* Opera support:

It seems pointer-events:none; doesn't work in Opera. Instead you could use:

#toggle:target .top {
    display: none;  
}

And if needed, move all visual styles to an extra <span> element.
    
*/