پیشنمایش زنده
کد HTML
<label class="container">
<input checked="checked" type="checkbox">
<svg viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg" class="flag-regular"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V64 350.5 400v88c0 13.3 10.7 24 24 24s24-10.7 24-24V388l80.3-20.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L48 52V24zm0 77.5l96.6-24.2c27-6.7 55.5-3.6 80.4 8.8c54.9 27.4 118.7 29.7 175 6.8V334.7l-24.4 9.1c-33.7 12.6-71.2 10.7-103.4-5.4c-48.2-24.1-103.3-30.1-155.6-17.1L48 338.5v-237z"></path></svg>
<svg viewBox="0 0 448 512" height="1em" xmlns="http://www.w3.org/2000/svg" class="flag-solid"><path d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z"></path></svg>
</label>
کد CSS
/*------ Settings ------*/
.container {
--color: #a5a5b0;
--size: 30px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
font-size: var(--size);
user-select: none;
fill: var(--color);
}
.container .flag-regular {
position: absolute;
animation: keyframes-fill .5s;
}
.container .flag-solid {
position: absolute;
display: none;
animation: keyframes-fill .5s;
}
/* ------ On check event ------ */
.container input:checked ~ .flag-regular {
display: none;
}
.container input:checked ~ .flag-solid {
display: block;
}
/* ------ Hide the default checkbox ------ */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* ------ Animation ------ */
@keyframes keyframes-fill {
0% {
transform: rotate(0deg) scale(0);
opacity: 0;
}
50% {
transform: rotate(-10deg) scale(1.2);
}
}