<input id="double-click-single-0-toggle" class="toggle double-click-toggle double-click-single-0-toggle" type="radio" name="double-click-state" />
<input id="double-click-single-1-toggle" class="toggle double-click-toggle double-click-single-1-toggle" type="radio" name="double-click-state" />
<input id="double-click-double-toggle" class="toggle double-click-toggle double-click-double-toggle" type="radio" name="double-click-state" />
<span class="button double-click-button">
<label class="double-click-label double-click-none" for="double-click-single-0-toggle">Click Fast</label>
<label class="double-click-label double-click-single-0 double-click-unmask" for="double-click-double-toggle">Single-Clicked</label>
<label class="double-click-label double-click-single-0 double-click-mask" for="double-click-single-1-toggle">Single-Clicked</label>
<label class="double-click-label double-click-single-1 double-click-unmask" for="double-click-double-toggle">Single-Clicked</label>
<label class="double-click-label double-click-single-1 double-click-mask" for="double-click-single-0-toggle">Single-Clicked</label>
<label class="double-click-label double-click-double double-click-unmask" for="double-click-double-toggle">Double-Clicked</label>
<label class="double-click-label double-click-double double-click-mask" for="double-click-single-0-toggle">Double-Clicked</label>
</span>
body {
margin: 0;
background-color: #161819;
font: 20px/1.5 'Titillium Web', sans-serif;
}
.button {
display: inline-block;
border: 0.1em solid #444f55;
border-radius: 0.3em;
padding: 0.5em;
background-color: #617078;
color: #3d484c;
text-align: center;
font-size: 1em;
line-height: 1;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.button:hover {
background-color: #6f828b;
}
.button:active {
background-color: #546269;
}
.toggle {
display: none;
}
.double-click-button {
position: relative;
margin: 2em;
padding: 0;
width: 8em;
height: 2em;
}
.double-click-label,
.double-click-toggle:checked ~ .double-click-button .double-click-none {
display: none;
}
.double-click-none,
.double-click-single-0-toggle:checked ~ .double-click-button .double-click-single-0,
.double-click-single-0-toggle:checked ~ .double-click-button .double-click-single-0,
.double-click-single-1-toggle:checked ~ .double-click-button .double-click-single-1,
.double-click-double-toggle:checked ~ .double-click-button .double-click-double {
display: block;
}
.double-click-label {
position: absolute;
right: -0.1em;
left: -0.1em;
line-height: 2.2em;
cursor: pointer;
animation-duration: 400ms;
animation-timing-function: step-end;
}
.double-click-mask {
top: -0.1em;
animation-name: mask;
}
.double-click-unmask {
top: -8em;
animation-name: unmask;
}
@keyframes mask {
0% {
top: -8em;
}
100% {
top: -0.1em;
}
}
@keyframes unmask {
0% {
top: -0.1em;
}
100% {
top: -8em;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.