CSS Animation – Check

CSS Animation - Check

HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>checkbox</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
</head>
<body>

    <div class="center">
        <label>
            <input type="checkbox" name="">The world is not a flat tray.
        </label>
    </div>

</body>
</html>

CSS CODE:

body{
    margin: 0;
    padding: 0;
}
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    text-align: center;
}
input[type="checkbox"]{
    position: relative;
    top:8px;
    width: 40px;
    height: 40px;
    -webkit-appearance:none;
    outline: none;
    transition: .5s;
}
input[type="checkbox"]:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:4px solid #262626;
    box-sizing: border-box;
    transition: .5s;
}
input:checked[type="checkbox"]:before{
    border-left: none;
    border-top: none;
    width: 20px;
    border-color: #0f0;
    transform: rotate(45deg) translate(5px,-10px);
}
label{
    font-size: 36px;
    font-family: sans-serif;
}

Leave a comment Cancel reply

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

Design a site like this with WordPress.com