Skip to content
Advertisements

CSS Animation Check

https://codepen.io/guldus/pen/MZzEdw

githup:https://github.com/guldus98/HTML-CSS/tree/master/CSS%20Animation%20Check


HTML CODE:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body>

    <form class="form">
        <h2>Checkboxes</h2>
        <div class="inputGroup">
            <input id="option1" name="option1" type="checkbox" />
            <label for="option1">Option One</label>
        </div>

        <div class="inputGroup">
            <input id="option2" name="option2" type="checkbox" />
            <label for="option2">Option Two</label>
        </div>

        
        <h2>Radio Buttons</h2>
        <div class="inputGroup">
            <input id="radio1" name="radio" type="radio" />
            <label for="radio1">Yes</label>
        </div>
        <div class="inputGroup">
            <input id="radio2" name="radio" type="radio" />
            <label for="radio2">No</label>
        </div>
    </form>

    <script></script>


</body>
</html>

CSS CODE:

.inputGroup{
    background:#fff;
    display:block;
    margin:10px 0px;
    position:relative
}
label{
    padding:12px 30px;
    width:100%;
    display:block;
    text-align:center;
    color:#3c454c;
    cursor:pointer;
    position:relative;
    z-index:2;
    transition: color .2s ease-in;
    overflow:hidden;
}
label::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    position:absolute;
    background:#5562eb;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale3d(1,1,1);
    transition:all .3s cubic-bezier(.4,0,.2,1);
    opacity:0;
    z-index:-1;
}
label::after{
    content:"";
    width:32px;
    height:32px;
    border:2px solid #d1d7dc;
    background-color:#fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat:no-repeat;
    background-position:2px 3px;
    border-radius:50%;
    z-index:2;
    position:absolute;
    right:30px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    transition:all .2s ease-in;
}

input:checked ~ label{
    color:#fff;
}

input:checked ~ label::before{
    transform:translate(-50%,-50%) scale3d(56,56,1);
    opacity:1;
}

input:checked ~ label::after{
    background-color:#54e0c7;
    border-color:#53e0c7;
}

input{
    width:32px;
    height:32px;
    order:1;
    z-index:2;
    position:absolute;
    right:30px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    visibility:hidden
}

.form{
    padding:0 16px;
    max-width:550px;
    margin:50px auto;
    font-size:18px;
    font-weight:600;
    line-height:36px;
}
body {
    background-color: #D1D7DC;
    font-family: 'Fira Sans', sans-serif;
}
*,
*::before,
*::after{
    box-sizing:inherit;
}

html{
    box-sizing:border-box;
}
Advertisements

1 Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: