Pure CSS checkboxes with one element

Here is a Pure CSS checkbox with only one element. It’s also accessibility friendly.

HTML

<input type=”checkbox” data-name=”Item 3″ class=”checkbox”>

The CSS

@import url(“https://fonts.googleapis.com/css2?family…


This content originally appeared on DEV Community and was authored by Posandu Mapa

Here is a Pure CSS checkbox with only one element. It’s also accessibility friendly.

HTML 

<input type="checkbox" data-name="Item 3" class="checkbox">

The CSS 

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

.checkbox {
    appearance: none;
    height: 100px;
    width: 100px;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(37, 145, 251, 0.98) 0.1%, rgba(0, 7, 128, 1) 99.8%);
    background-size: 360% 100%;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.checkbox:after {
    content: attr(data-name);
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-family: "Inter", sans-serif;
    color: #3f3f3f;
    z-index: 99;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.checkbox:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0px;
    height: 200%;
    width: 200%;
    background: #e9e9e9;
    z-index: 0;
    transition: all 0.2s linear;
    transform: scale(0.6) translate(-50%, -50%);
}
.checkbox:hover:before,
.checkbox:focus-visible:before {
    background: #cacaca;
    top: -4%;
    left: 20%;
}
.checkbox:checked:before {
    opacity: 0;
    transform: scale(0.9);
}
.checkbox:checked:after {
    color: white;
}
.checkbox:checked {
    box-shadow: 0px 4px 10px -6px black;
}

.checkbox:focus-visible {
    outline: none;
    box-shadow: 0px 0px 0px 5px #480f5d;
}

See the result on My Website. (I do this because I can't embed iframes).


This content originally appeared on DEV Community and was authored by Posandu Mapa


Print Share Comment Cite Upload Translate Updates
APA

Posandu Mapa | Sciencx (2021-07-27T15:58:34+00:00) Pure CSS checkboxes with one element. Retrieved from https://www.scien.cx/2021/07/27/pure-css-checkboxes-with-one-element/

MLA
" » Pure CSS checkboxes with one element." Posandu Mapa | Sciencx - Tuesday July 27, 2021, https://www.scien.cx/2021/07/27/pure-css-checkboxes-with-one-element/
HARVARD
Posandu Mapa | Sciencx Tuesday July 27, 2021 » Pure CSS checkboxes with one element., viewed ,<https://www.scien.cx/2021/07/27/pure-css-checkboxes-with-one-element/>
VANCOUVER
Posandu Mapa | Sciencx - » Pure CSS checkboxes with one element. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/27/pure-css-checkboxes-with-one-element/
CHICAGO
" » Pure CSS checkboxes with one element." Posandu Mapa | Sciencx - Accessed . https://www.scien.cx/2021/07/27/pure-css-checkboxes-with-one-element/
IEEE
" » Pure CSS checkboxes with one element." Posandu Mapa | Sciencx [Online]. Available: https://www.scien.cx/2021/07/27/pure-css-checkboxes-with-one-element/. [Accessed: ]
rf:citation
» Pure CSS checkboxes with one element | Posandu Mapa | Sciencx | https://www.scien.cx/2021/07/27/pure-css-checkboxes-with-one-element/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts