Just a Simple 'I Agree' Button in Pure CSS

Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create a custom, very simple and elegant 'I Agree' checkbox in Pure CSS. You might have seen this kind of check box when the website asks you to agree their terms and conditions. So this is another way to style the same checkbox which looks much more elegant and amazing.

Here's a preview-

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Simple Checkbox</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="wrap centre">
    <div class="checkbox">
        <input id="check" type="checkbox" name="check" value="check">
        <label for="check">i agree.</label>
    </div>
</div>


</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS



body {
    background: #f6f7fc;
    font-family: 'Trebuchet MS';
}
.wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) scale(2,2);
}
input {
    display: none;
}
label {
    font-size: 24px;
    color: #bfbfbf;
    display: inline-block;
    padding: 0 0 0 1em;
    cursor: pointer;
}
label:before {
    content: '';
    display: inline-block;
    background: #55D8C6;
    position: absolute;
    left: 0;
    top: 5px;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    border-radius: 80%;
    box-shadow: 0px 1px 0 0 rgba(0, 0, 0, .2);
    box-sizing: border-box;
    border: 10px solid #fff;
    transition: border .3s ease;
}

input:checked + label:before {
    border-color: #fff;
    border-width: 3px;
}
input + label {
    transition: color .7s ease;
}
input:checked + label {
    color: #5D5D5D;
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love