<span class="button double-click-button">
<span class="double-click-container">
<span class="double-click-scroll">
<span class="double-click-option">
<span class="double-click-buffer">
<span class="double-click-label">Click Fast</span>
</span>
<a class="double-click-filler" href="#single-click"></a>
</span>
<span class="double-click-option">
<span class="double-click-buffer">
<span class="double-click-label">Single-Clicked</span>
</span>
<a id="single-click" class="double-click-anchor" href="#double-click"></a>
<a class="double-click-filler" href="#single-click"></a>
</span>
<span class="double-click-option">
<span class="double-click-buffer">
<span class="double-click-label">Double-Clicked</span>
</span>
<a id="double-click" class="double-click-anchor" href="#double-click"></a>
<a class="double-click-filler" href="#single-click"></a>
</span>
</span>
</span>
</span>
body {
margin: 0;
background-color: #161819;
font: 20px/1.5 'Titillium Web', sans-serif;
}
.button, .double-click-button a {
color: #3d484c;
text-decoration: none;
}
.button {
display: inline-block;
border: 0.1em solid #444f55;
border-radius: 0.3em;
padding: 0.5em;
background-color: #617078;
font-size: 1em;
line-height: 1;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.button:hover {
background-color: #6f828b;
}
.button:active {
background-color: #546269;
}
.double-click-button {
margin: 2em;
padding: 0;
}
.double-click-button a, .double-click-button span {
display: block;
}
.double-click-container {
position: relative;
width: 8.2em;
height: 2.2em;
margin: -0.1em;
overflow: hidden;
}
.double-click-scroll {
position: absolute;
left: 0;
width: 100%;
animation-name: scroll;
animation-duration: 3600s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.double-click-option {
position: relative;
left: 0;
width: 100%;
}
.double-click-buffer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
clip: rect(0, auto, auto, 0);
clip-path: inset(0);
}
.double-click-label {
position: fixed;
top: 2.1em;
left: 2.1em;
width: 8em;
height: 2em;
text-align: center;
line-height: 2;
}
.double-click-anchor {
position: relative;
width: 100%;
height: 20em;
}
.double-click-filler {
position: relative;
width: 100%;
height: 80000em;
}
@keyframes scroll {
0% {
top: 0;
}
100% {
top: -240000em;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.