<label>
<input type="checkbox" />
Click me
</label>
input {
transition-property: opacity, display;
transition-behavior: allow-discrete;
transition-duration: 1s;
display: block;
opacity: 1;
height: 40px;
width: 40px;
@starting-style {
opacity: 0;
}
}
input:checked {
display: none;
opacity: 0;
}
label {
font-size: 2rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.