<div class="wrapper">
<input name="rad" class="opt-1" id="rad1" type="radio" />
<label for="rad1">Hello 😺</label>
<input name="rad" class="opt-2" id="rad2" type="radio" />
<label for="rad2">is it kitty 😸</label>
<input name="rad" class="opt-3" id="rad3" type="radio" />
<label for="rad3">you're looking for? 😻</label>
<input name="rad" class="opt-4" id="rad4" type="radio" />
<label for="rad4">No?? 😿</label>
<div class="tracker"></div>
</div>
html,
body {
height: 100%;
}
body {
padding: 0;
margin: 0;
background: #222;
color: #fff;
}
input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.wrapper {
position: absolute;
padding-bottom: 1.25em;
width: 100%;
max-width: 52rem;
margin: 8rem 0 5rem;
left: 50%;
transform: translateX(-50%);
font-size: 0;
}
label {
position: relative;
display: inline-block;
cursor: pointer;
width: 140px;
height: 50px;
margin-right: 10px;
line-height: 50px;
text-align: center;
font-family: "Courier New", Courier, monospace;
font-size: 17px;
}
.opt-3 + label {
width: 300px;
}
/* background-size and backround-position on :checked is only needed if using gradients instead of solid backgrounds */
.tracker {
height: 2px;
width: 140px;
background: linear-gradient(to right, limegreen, skyblue, darkorchid, hotpink, aqua);
background-size: 400%;
position: absolute;
transition: all 270ms ease-in-out, width 270ms ease-in-out;
}
.opt-2:checked ~ .tracker {
transform: translateX(0);
}
.opt-2:checked ~ .tracker {
background-position: 25%;
transform: translateX(150px);
}
.opt-3:checked ~ .tracker {
width: 300px;
background-position: 60%;
transform: translateX(300px);
}
.opt-4:checked ~ .tracker {
background-position: 90%;
transform: translateX(600px);
}
@media screen and (max-width: 770px) {
.opt-4,
.opt-4 + label {
display: none;
}
}
/*
Thanks to @NeXTs for the trick on how to make the gradients transition smoothly
https://codepen.io/meowwwls/details/EgqWMo#comment-id-161359
Not:
- responsive
- dynamic
- that good
This was just an experiment to see if I could do this without JavaScript
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.