비전공자 개발일기

Animated Gender Selection Page Design 본문

HTML _CSS

Animated Gender Selection Page Design

HiroDaegu 2023. 2. 2. 11:38
728x90
SMALL

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

<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>ANIMATED GENDER SELECTION PAGE DESIGN</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <img src="gender.png" alt="gender">
        <h2>Which one are you?</h2>
        <div class="gender">
            <label style="--clr: #6BE7FF; ">
                <input type="radio" name="gender" id="gender">
                <i></i>
                <span>Male</span>
            </label>
            <label style="--clr: #FF7AB2; ">
                <input type="radio" name="gender" id="gender">
                <i></i>
                <span>Female</span>
            </label>
        </div>
    </div>
</body>

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #222;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.container img {
    max-width: 150px;
}

.container h2 {
    font-size: 2em;
    font-weight: 500;
    color: #FFF;
}

.container .gender {
    display: flex;
    gap: 20px;
}

.container .gender label {
    position: relative;
    padding: 15px 40px 15px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.container .gender label input {
    appearance: none;
}

.container .gender label i {
    position: relative;
    width: 20px;
    height: 20px;
    /* background-color: #F00;   */
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .gender label i::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #999;
    transform: rotate(45deg);
    transition: .5s;
}

.container .gender label i::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #999;
    transform: rotate(315deg);
    transition: .5s;
}

.container .gender label input:checked ~ i::before {
    width: 50%;
    transform: rotate(45deg) translate(-4px, 9px);
}

.container .gender label input:checked ~ i::before,
.container .gender label input:checked ~ i::after {
    background-color: #333;
}

.container .gender label span {
    color: #999;
    transition: .5s;
}

.container .gender label span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 3px solid #444;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    box-sizing: border-box;
    pointer-events: none;
    transition: .5s;
    z-index: -1;
}

.container .gender label:hover span::before {
    border: 3px solid var(--clr);
}

.container .gender label input:checked ~ span::before {
    background-color: var(--clr);
    border: 3px solid var(--clr);
    box-shadow: 0 0 20px var(--clr), 0 0 60px var(--clr);
}

.container .gender label input:checked ~ span {
    color: #333;
}
728x90
LIST

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

Cocacola  (0) 2023.02.05
Movie Streaming Website  (0) 2023.02.04
Shine effect on hover  (0) 2023.02.01
Bubbles on Button Clicked  (0) 2023.01.31
Police VS Taxi  (0) 2023.01.30
'HTML _CSS' Related Articles more