- /* all the slides*/
- article {
transform: translate(100%, 0) scale(0.1) rotate(180deg);
transition: all 0.25s ease-in;
}
- /* just the current slide */
- input:checked + label + article {
transform: translate(0, 0) scale(1) rotate(0deg);
}
- /* back button */
- input:checked + label::after {
content: '« back';
position: absolute;
bottom: 20px;
left: 20px;
transform: translatez(0);
cursor: pointer;
}
- /* next button */
- input:checked + label + article + input:not(:checked) {
position: absolute;
bottom: 20px;
right: 20px;
cursor: pointer;
appearance: none;
font-size: 1rem;
}
input:checked + label + article + input:not(:checked)::after {
content: 'next »';
padding: 0 8px 4px;
color: var(--white);
border-radius: 4px;
background-color: var(--hilight);
line-height: 2;
box-shadow: var(--shadow);
}