IncludeHelp_logo
Skip Navigation Links

Home » HTML

Beautiful CSS Checkboxes Examples

By IncludeHelp Last updated : October 27, 2024

If you're looking for beautiful and ready-to-use CSS checkboxes to enhance your website design, this collection of 20+ CSS checkbox examples provides beautiful designs of checkboxes. Each checkbox style has its own CSS and HTML codes, which you can simply copy and integrate into your design.

1. Rounded Checkbox

CSS Code

.rounded-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    appearance: none;
    border: 2px solid #006969;
    cursor: pointer;
    transition: background 0.3s;
}
.rounded-checkbox:checked {
    background: #006969;
}

HTML Code

<input type="checkbox" id="rounded-checkbox" class="rounded-checkbox">
<label for="rounded-checkbox">Rounded Checkbox</label>

2. Switch Checkbox

CSS Code

.switch-checkbox {
    position: relative;
    width: 40px;
    height: 20px;
    appearance: none;
    background-color: #ccc;
    outline: none;
    cursor: pointer;
    border-radius: 20px;
    transition: background 0.3s;
}
.switch-checkbox:checked {
    background-color: #006969;
}
.switch-checkbox:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}
.switch-checkbox:checked:after {
    left: 22px;
}

HTML Code

<input type="checkbox" id="switch-checkbox" class="switch-checkbox">
<label for="switch-checkbox">Switch Checkbox</label>

3. Bordered Checkbox

CSS Code

.bordered-checkbox {
    width: 20px;
    height: 20px;
    appearance: none;
    border: 2px solid #006969;
    background: none;
    cursor: pointer;
    transition: all 0.3s;
}
.bordered-checkbox:checked {
    background: #006969;
    color: #fff;
}

HTML Code

<input type="checkbox" id="bordered-checkbox" class="bordered-checkbox">
<label for="bordered-checkbox">Bordered Checkbox</label>

4. Gradient Checkbox

CSS Code

.gradient-checkbox {
    width: 20px;
    height: 20px;
    appearance: none;
    border: 2px solid #006969;
    cursor: pointer;
    background: linear-gradient(135deg, #006969, #00b7b7);
    transition: all 0.3s;
}
.gradient-checkbox:checked {
    background: linear-gradient(135deg, #00b7b7, #006969);
}

HTML Code

<input type="checkbox" id="gradient-checkbox" class="gradient-checkbox">
<label for="gradient-checkbox">Gradient Checkbox</label>

5. Icon Checkbox

CSS Code

.icon-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #006969;
    cursor: pointer;
    background: none;
    position: relative;
}
.icon-checkbox:checked::after {
    content: '✓';
    position: absolute;
    color: #006969;
    font-size: 18px;
    left: 2px;
    top: -2px;
}

HTML Code

<input type="checkbox" id="icon-checkbox" class="icon-checkbox">
<label for="icon-checkbox">Icon Checkbox</label>

6. Neon Checkbox

CSS Code

.neon-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #00ffcc;
    background: none;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 5px #00ffcc;
    transition: all 0.3s;
}
.neon-checkbox:checked {
    background: #00ffcc;
    box-shadow: 0 0 15px #00ffcc;
}

HTML Code

<input type="checkbox" id="neon-checkbox" class="neon-checkbox">
<label for="neon-checkbox">Neon Checkbox</label>

7. Custom Shape Checkbox

CSS Code

.custom-shape-checkbox {
    width: 20px;
    height: 20px;
    appearance: none;
    background: #006969;
    border: 2px solid #006969;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
    cursor: pointer;
    transition: all 0.3s;
}
.custom-shape-checkbox:checked {
    background: #ffffff;
}

HTML Code

<input type="checkbox" id="custom-shape-checkbox" class="custom-shape-checkbox">
<label for="custom-shape-checkbox">Custom Shape Checkbox</label>

8. Striped Checkbox

CSS Code

.striped-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #006969;
    cursor: pointer;
    background: repeating-linear-gradient(
        45deg,
        #006969,
        #006969 10px,
        #ffffff 10px,
        #ffffff 20px
    );
}
.striped-checkbox:checked {
    background: #006969;
    color: #fff;
}

HTML Code

<input type="checkbox" id="striped-checkbox" class="striped-checkbox">
<label for="striped-checkbox">Striped Checkbox</label>

9. Frosted Checkbox

CSS Code

.frosted-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s;
}
.frosted-checkbox:checked {
    background: rgba(255, 255, 255, 0.5);
    border-color: #ffffff;
}

HTML Code

<input type="checkbox" id="frosted-checkbox" class="frosted-checkbox">
<label for="frosted-checkbox">Frosted Checkbox</label>

10. Textured Checkbox

CSS Code

.textured-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #006969;
    cursor: pointer;
    background: url('https://www.transparenttextures.com/patterns/paper.png');
}
.textured-checkbox:checked {
    background: #006969;
}

HTML Code

<input type="checkbox" id="textured-checkbox" class="textured-checkbox">
<label for="textured-checkbox">Textured Checkbox</label>

11. Boxy Checkbox

CSS Code

.boxy-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 3px solid #007bff;
    cursor: pointer;
    background: #ffffff;
    transition: background 0.3s, border 0.3s;
}
.boxy-checkbox:checked {
    background: #007bff;
    border-color: #0056b3;
}

HTML Code

<input type="checkbox" id="boxy-checkbox" class="boxy-checkbox">
<label for="boxy-checkbox">Boxy Checkbox</label>

12. Glitter Checkbox

CSS Code

.glitter-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ff00ff;
    background: linear-gradient(45deg, #ff00ff, #00ffff);
    cursor: pointer;
    background-clip: padding-box;
}
.glitter-checkbox:checked {
    background: url('https://www.transparenttextures.com/patterns/diamond.png');
}

HTML Code

<input type="checkbox" id="glitter-checkbox" class="glitter-checkbox">
<label for="glitter-checkbox">Glitter Checkbox</label>

13. Shadow Checkbox

CSS Code

.shadow-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}
.shadow-checkbox:checked {
    background: #006969;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

HTML Code

<input type="checkbox" id="shadow-checkbox" class="shadow-checkbox">
<label for="shadow-checkbox">Shadow Checkbox</label>

14. Dotted Checkbox

CSS Code

.dotted-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px dotted #007bff;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s;
}
.dotted-checkbox:checked {
    background: #007bff;
}

HTML Code

<input type="checkbox" id="dotted-checkbox" class="dotted-checkbox">
<label for="dotted-checkbox">Dotted Checkbox</label>

15. Soft Checkbox

CSS Code

.soft-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #cccccc;
    background: #f9f9f9;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s, border-color 0.3s;
}
.soft-checkbox:checked {
    background: #4caf50;
    border-color: #388e3c;
}

HTML Code

<input type="checkbox" id="soft-checkbox" class="soft-checkbox">
<label for="soft-checkbox">Soft Checkbox</label>

16. Underline Checkbox

CSS Code

.underline-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ff5722;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s;
}
.underline-checkbox:checked {
    background: #ff5722;
    border: 2px solid #ff3d00;
    text-decoration: underline;
}

HTML Code

<input type="checkbox" id="underline-checkbox" class="underline-checkbox">
<label for="underline-checkbox">Underline Checkbox</label>

17. Flip Checkbox

CSS Code

.flip-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #673ab7;
    background: #ffffff;
    cursor: pointer;
    transition: transform 0.3s;
}
.flip-checkbox:checked {
    transform: rotate(180deg);
    background: #673ab7;
    border-color: #5e35b1;
}

HTML Code

<input type="checkbox" id="flip-checkbox" class="flip-checkbox">
<label for="flip-checkbox">Flip Checkbox</label>

18. Checkmark Checkbox

CSS Code

.checkmark-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ff5722;
    background: #ffffff;
    cursor: pointer;
}
.checkmark-checkbox:checked {
    background: #ff5722;
}
.checkmark-checkbox:checked:after {
    content: '✓';
    color: white;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
}

HTML Code

<input type="checkbox" id="checkmark-checkbox" class="checkmark-checkbox">
<label for="checkmark-checkbox">Checkmark Checkbox</label>

19. To-Do Strikethrough Checkbox

CSS Code

.todo-checkbox {
    display: none;
}
.todo-checkbox + label {
    cursor: pointer;
    font-size: 1.2em;
}
.todo-checkbox:checked + label {
    text-decoration: line-through;
    color: #999;
}

HTML Code

<input type="checkbox" id="todo-checkbox" class="todo-checkbox">
<label for="todo-checkbox">Today’s Task</label>

20. Glossy Embossed Flip Checkbox

CSS Code

.glossy-flip-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(to right, #ff8a00, #e52e71);
    border: 2px solid #e52e71;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}
.glossy-flip-checkbox:checked {
    transform: rotateY(180deg);
    box-shadow: 0 0 10px #e52e71;
}

HTML Code

<input type="checkbox" id="glossy-flip-checkbox" class="glossy-flip-checkbox">
<label for="glossy-flip-checkbox">Glossy Flip</label>

21. Circle Checkbox with Cross and Check

CSS Code

.circle-checkbox {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #ff4757;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    text-align: center;
    transition: background 0.3s, border-color 0.3s;
}
.circle-checkbox:checked {
    border-color: #2ed573;
    background-color: #2ed573;
}
.circle-checkbox:checked::before {
    content: '✓';
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 4px;
}
.circle-checkbox::before {
    content: '✕';
    color: #ff4757;
    position: absolute;
    top: 0;
    left: 4px;
}

HTML Code

<input type="checkbox" id="circle-checkbox" class="circle-checkbox">
<label for="circle-checkbox">Accept Terms</label>

22. Switch Button (Yes/No)

CSS Code

.checkbox-wrapper-55 input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

.checkbox-wrapper-55 *,
.checkbox-wrapper-55 ::after,
.checkbox-wrapper-55 ::before {
    box-sizing: border-box;
}

.checkbox-wrapper-55 .rocker {
    display: inline-block;
    position: relative;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #888;
    width: 7em;
    height: 4em;
    overflow: hidden;
    border-bottom: 0.5em solid #eee;
}

.checkbox-wrapper-55 .rocker-small {
    font-size: 0.75em;
}

.checkbox-wrapper-55 .rocker::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #999;
    border: 0.5em solid #eee;
    border-bottom: 0;
}

.checkbox-wrapper-55 .switch-left,
.checkbox-wrapper-55 .switch-right {
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5em;
    width: 3em;
    transition: 0.2s;
    user-select: none;
}

.checkbox-wrapper-55 .switch-left {
    height: 2.4em;
    width: 2.75em;
    left: 0.85em;
    bottom: 0.4em;
    background-color: #ddd;
    transform: rotate(15deg) skewX(15deg);
}

.checkbox-wrapper-55 .switch-right {
    right: 0.5em;
    bottom: 0;
    background-color: #bd5757;
    color: #fff;
}

.checkbox-wrapper-55 .switch-left::before,
.checkbox-wrapper-55 .switch-right::before {
    content: "";
    position: absolute;
    width: 0.4em;
    height: 2.45em;
    bottom: -0.45em;
    background-color: #ccc;
    transform: skewY(-65deg);
}

.checkbox-wrapper-55 .switch-left::before {
    left: -0.4em;
}

.checkbox-wrapper-55 .switch-right::before {
    right: -0.375em;
    background-color: transparent;
    transform: skewY(65deg);
}

.checkbox-wrapper-55 input:checked + .switch-left {
    background-color: #0084d0;
    color: #fff;
    bottom: 0px;
    left: 0.5em;
    height: 2.5em;
    width: 3em;
    transform: rotate(0deg) skewX(0deg);
}

.checkbox-wrapper-55 input:checked + .switch-left::before {
    background-color: transparent;
    width: 3.0833em;
}

.checkbox-wrapper-55 input:checked + .switch-left + .switch-right {
    background-color: #ddd;
    color: #888;
    bottom: 0.4em;
    right: 0.8em;
    height: 2.4em;
    width: 2.75em;
    transform: rotate(-15deg) skewX(-15deg);
}

.checkbox-wrapper-55 input:checked + .switch-left + .switch-right::before {
    background-color: #ccc;
}

.checkbox-wrapper-55 input:focus + .switch-left {
    color: #333;
}

.checkbox-wrapper-55 input:checked:focus + .switch-left {
    color: #fff;
}

.checkbox-wrapper-55 input:focus + .switch-left + .switch-right {
    color: #fff;
}

.checkbox-wrapper-55 input:checked:focus + .switch-left + .switch-right {
    color: #333;
}

HTML Code

<div class="checkbox-wrapper-55">
    <label class="rocker rocker-small">
        <input type="checkbox">
        <span class="switch-left">Yes</span>
        <span class="switch-right">No</span>
    </label>
</div>
CSS Buttons Examples
CSS Loading Animations

Comments and Discussions!

Load comments ↻



Top MCQs
Top Programs/Examples
Top Tutorials
About
Student's Section
Subscribe

Copyright © 2024 www.includehelp.com. All rights reserved.