비전공자 개발일기

Stylish Checkbox 본문

HTML _CSS

Stylish Checkbox

HiroDaegu 2023. 1. 15. 00:49
728x90
SMALL

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STYLISH CHECKBOX</title>
    <link rel="stylesheet" href="style.css">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css' integrity='sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==' crossorigin='anonymous'/>
</head>

<body>
    <input type="checkbox" name="checkbox" id="input-toggle" class="input-toggle" />
    <div class="checkbox__container">
        <label for="input-toggle" class="label-for-toggle">
            <span class="ball arrow">
                <i class="fas fa-arrow-right"></i>
            </span>
        </label>
    </div>
</body>

</html>
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: hsl(188deg 3% 83%);
}

:root {
    --container: 16rem;
    --height: 5.125rem;
    --ball: 4.25rem;
}

[type="checkbox"] {
    appearance: none;
    display: none;
}

.checkbox__container {
    transform: scale(1.2);
    display: grid;
    inline-size: var(--container);
    block-size: var(--height);
    border-radius: 100vh;
    background: linear-gradient(45deg, hsl(39, 100%, 80%), hsl(300, 47%, 85%));
    box-shadow: 0px 1.9px 3.2px rgba(0, 0, 0, 0.25);
    outline: 1px solid hsl(0, 0%, 60%, 0.2);
}

.label-for-toggle {
    cursor: pointer;
    isolation: isolate;
    display: grid;
    place-content: center start;
    width: inherit;
    border-radius: inherit;
    border: 16px solid hsl(200, 0%, 100%, 0.825);
    box-shadow: 0 2px 2px 1px #0003 inset, inset 0 -1px 1.5px 1px #fff7;
}

.ball {
    place-self: center start;
    position: absolute;
    left: 0.5rem;
    mix-blend-mode: color;
    display: grid;
    place-content: center;
    width: var(--ball);
    aspect-ratio: 1;
    background: linear-gradient(135deg, #3DDBD9, #8DA2EC, #FE95FF);
    border-radius: 50%;
    transition: transform 500ms cubic-bezier(0.4, 0.47, 0.66, 0.86);
    box-shadow: 0 0 0.75rem 0 #0004;
}

.ball i {
    font-size: 2.5em;
    color: #FFF;
    -webkit-text-stroke: 1px #0006;
}

:checked ~ .checkbox__container .ball {
    transform: translateX(calc(var(--container) - var(--ball) - 1rem))
        rotate(540deg);
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Responsive Tabs  (0) 2023.01.19
3D Cube Slider  (0) 2023.01.17
Animated Instagram Logo  (0) 2023.01.14
Animated Service Section Card UI  (0) 2023.01.13
Skeleton Screen  (0) 2023.01.12
'HTML _CSS' Related Articles more