53 Cool Custom Checkbox buttons

By | October 21, 2021

If you’re looking for a collection of custom checkboxes to spice up your forms, You don’t want to search anymore, because you’ve found it. There are over 53 different custom designs of checkboxes here ready to be used on your site. Most of us are familiar with checkboxes, they’ve been around for decades. You may also know that checkboxes can be styled using CSS. What you may not know is that it’s possible to create your own customized checkboxes.

Author

  • Valery
  • June 20, 2015

Link

Made with

  • HTML / CSS

About the Code

Custom checkbox

The empty box transforms into a check. No additional markup, just input, label for it, and some CSS

More info: Link

Dependency:


Author

  • Jon Kantner
  • September 4, 2018

Link

Made with

  • HTML / SCSS / JS

About the Code

Pencil and Paper Checkboxes

A checkbox concept that simulates filling checkboxes and erasing checks in real life

Update 1/9/20: Reduced JS code

More info: Link

Dependency: fonts.googleapis


Author

  • Amit Sheen
  • October 5, 2021

Link

Made with

  • HTML / SCSS

About the Code

FlipBoxes

More info: Link

Dependency:


Author

  • Michelle Barker
  • September 14, 2021

Link

Made with

  • HTML / SCSS

About the Code

Custom Checkboxes and radio buttons with background image

More info: Link

Dependency:


Author

  • Håvard Brynjulfsen
  • April 10, 2021

Link

Made with

  • HTML / SCSS

About the Code

Custom Checkbox group styled as tiles

A demonstration of how to create checkboxes that don’t necessarily look like… well, checkboxes.

Updated on July 5, 2021

More info: Link

Dependency:


Author

  • Jon Kantner
  • December 3, 2020

Link

Made with

  • HTML / CSS / JS

About the Code

Animated Fill and Strikethrough Custom Checkboxes

A checkbox concept where the unchecked state is secretly a square covering the checkmark. When checked, the fill is shaped into a line and penetrates the label text. The reverse happens when unchecked again.

More info: Link

Dependency:


Author

  • Mahmoud Elmahdi
  • May 31, 2019

Link

Made with

  • Pug / SCSS

About the Code

Stylish Input

More info: Link

Dependency:


Author

  • Jon Kantner
  • August 7, 2020

Link

Made with

  • HTML / CSS / JS

About the Code

Interactive Soft Drink Lid

A realistic interactive plastic lid made with checkboxes and CSS. The bubbles can even become slightly worn after being pressed once!

More info: Link

Dependency: fonts (Karla:[email protected];700, Inconsolata)


Author

  • Wallace Erick
  • July 14, 2013

Link

Made with

  • HTML / SCSS / JS

About the Code

Custom CSS Checkbox

With pure CSS.

Updated on September 23, 2020

More info: Link

Dependency: jquery.min.js


Author

  • mattdrose
  • May 27, 2014

Link

Made with

  • HTML / SCSS

About the Code

Custom Checkbox

Custom checkboxes that would work well with an icon font. Modern browser support with IE6+ fallback.

Updated on May 31, 2016

More info: Link

Dependency:


Author

  • André Cortellini
  • September 4, 2014

Link

Made with

  • HTML / CSS

About the Code

Custom Checkbox

Very easy custom checkbox. Only using HTML & CSS.

More info: Link

Dependency:


Author

  • Tommy Rolchau Mathiesen
  • October 23, 2014

Link

Made with

  • HTML / SCSS

About the Code

Custom checkbox with svg marker

Requirements: Need custom checkboxes instead of native in IE9, Chrome, Safari, and Firefox. Nice to have: Animating checkbox marker (Works in newer versions of firefox, chrome, and safari).

Updated on February 5, 2016

More info: Link

Dependency:


Author

  • Rian Ariona1
  • June 5, 2014

Link

Made with

  • HTML / SCSS / jQuery

About the Code

Responsive Custom checkbox

Updated on July 25, 2014

More info: Link

Dependency: font-awesome.min.css, jquery.min.js


Author

  • Luis Adame
  • February 18, 2018

Link

Made with

  • Pug / SCSS

About the Code

Cool Custom Checkbox with SVG!

A custom checkbox that makes use of SVG to animate the tick inside of it.

Updated on May 21, 2018

More info: Link

Dependency:


Author

  • Kenan Yusuf
  • January 13, 2016

Link

Made with

  • HTML / Stylus

About the Code

Completely CSS: Custom checkboxes, radio buttons and select boxes

Updated on January 18, 2017

More info: Link

Dependency:


Author

  • Sara Soueidan
  • March 22, 2015

Link

Made with

  • HTML / CSS

About the Code

CUSTOM ANIMATED CHECKBOXES

Updated on February 27, 2021

More info: Link

Dependency:


Author

  • Gabrielle Wee
  • February 21, 2017

Link

Made with

  • Haml / SCSS

About the Code

CSS-Only Custom Animated Checkbox

Check out the :checked animation.

Updated on February 25, 2017

More info: Link

Dependency:


Author

  • Ian Emsens
  • June 20, 2016

Link

Made with

  • HTML / CSS

About the Code

Simple Glyphicon Favorite Button

Stripe.com Style Dropdown Menu developed using Pug, SCSS and JavaScript.

More info: Link

Dependency:


Author

  • Alison Tague
  • January 10, 2016

Link

Made with

  • HTML / CSS

About the Code

Custom Checkbox

More info: Link

Dependency:


Author

  • Stas Melnikov
  • July 18, 2018

Link

Made with

  • HTML / CSS

About the Code

#CodePenChallenge | Pure CSS Checkboxes

Updated on September 20, 2020

More info: Link

Dependency:


Author

  • ihzh
  • November 24, 2015

Link

Made with

  • HTML / SCSS

About the Code

Custom checkbox CSS3

Updated on November 28, 2015

More info: Link

Dependency:


Author

  • javiluli
  • October 17, 2019

Link

Made with

  • Pug / SCSS

About the Code

Custom Checkbox animation – #16

Updated on March 16, 2021

More info: Link

Dependency:


Author

  • Himalaya Singh
  • October 2, 2018

Link

Made with

  • HTML / CSS

About the Code

Pure CSS Toggle Buttons | ON-OFF Switches

Collection of toggle buttons / on-off switches which can be practically used in a website. Designed using CSS without any JavaScript 🙂

Updated on November 20, 2020

More info: Link

Dependency:


Author

  • Justin Windle
  • February 8, 2013

Link

Made with

  • HTML / Sass

About the Code

Squishy Toggle Buttons

Simulating squishy rubber (elastomer) buttons.

Updated on April 1, 2013

More info: Link

Dependency:


Author

  • Brad Bodine
  • December 20, 2012

Link

Made with

  • HTML / SCSS / JS

About the Code

CSS3 Checkbox Styles

A few different checkbox styles.

Updated on June 12, 2015

More info: Link

Dependency: jquery.min.js


Author

  • Geoffrey Crofte
  • May 23, 2013

Link

Made with

  • HTML / SCSS / JS

About the Code

Accessible Custom Checkboxes with CSS only

Animated custom checkboxes using graceful degradation (display classical checkboxes on old browsers).

Updated on January 8, 2021

More info: Link

Dependency:


Author

  • Shaw
  • November 20, 2017

Link

Made with

  • HTML / Less / JS

About the Code

CSS-only Todo List Checkbox Animation

Original built with JS but adapted to be CSS-only since JS wasn’t necessary.

More info: Link

Dependency:


Author

  • Braydon Coyer
  • January 28, 2020

Link

Made with

  • HTML / SCSS

About the Code

Neuomorphic Checkboxes

Updated on March 4, 2020

More info: Link

Dependency:


Author

  • Clint Brown
  • August 4, 2013

Link

Made with

  • HTML / SCSS / JS

About the Code

Task Progress Meter

Click the current task checkbox to progress. Shout-out to Kurt Hanson’s Progress Bar (Pie) for the code behind the circular progress highlighting.

More info: Link

Dependency:


Author

  • Andreas Storm
  • February 8, 2017

Link

Made with

  • Slim / Stylus

About the Code

Jelly Checkbox

Updated on February 13, 2017

More info: Link

Dependency: bootstrap.min.css


Author

  • Tim Pietrusky
  • November 10, 2012

Link

Made with

  • HTML / SCSS / JS

About the Code

Advanced Checkbox Hack

This works for both iOS and Android! You can use almost the default checkbox-hack syntax and just need to add two things:

1. Android smaller than / equal 4.1.2

pseudo-class + general/adjacent sibling doesn’t work on Android 4.1.2 so we need a hack:

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

2. iOS smaller than 6.0

Due to a bug on iOS, it’s not possible to click the label to toggle the input (checkbox), so we add an empty onclick to the label:

<label for="button" onclick>click / touch</label>

Updated on November 13, 2012

More info: Link

Dependency:


Author

  • Tamino Martinius
  • May 12, 2018

Link

Made with

  • HTML / CSS / JS

About the Code

Wobble Checkboxes

Updated on September 16, 2020

More info: Link

Dependency:


Author

  • Will Boyd
  • June 15, 2015

Link

Made with

  • HTML / CSS

About the Code

Checkbox Trickery: Simple Toggle

The basic formula for controlling the look and feel of a checkbox. No JavaScript.

More info: Link

Dependency:


Author

  • Nicholas Cerminara
  • May 19, 2013

Link

Made with

  • HTML / CSS

About the Code

Pure CSS3 Star Wars Lightsaber Checkboxes

A simple and fun demo of CSS checkboxes that have a cool Star Wars Light Saber animation. Not really UI practical, but overall a cool demonstration.

Updated on July 16, 2013

More info: Link

Dependency:


Author

  • Adam Quinlan
  • October 18, 2018

Link

Made with

  • HTML / CSS

About the Code

chippy checkbox inputs

I had the occasion to create a field of checkboxes recently for a form and thought I would try to have a little fun with the styling.

Updated on October 20, 2018

More info: Link

Dependency:


Author

  • Katheer Mizal
  • June 21, 2017

Link

Made with

  • HTML / SCSS

About the Code

Style Checkboxes – using CSS custom properties

Updated on June 22, 2017

More info: Link

Dependency:


Author

  • Oleg Frolov
  • March 31, 2019

Link

Made with

  • Pug / Stylus / JS

About the Code

Checkboxswitcher

Are you struggling to choose between a checkbox and a switch? Are you not sure what’s best for the case? No stress anymore. Choose the Checkboxswitcher!

Updated on April 1, 2019

More info: Link

Dependency:


Author

  • Mohammadreza Ziadzadeh
  • June 15, 2019

Link

Made with

  • HTML / SCSS

About the Code

Checkbox

Simple checkbox with animation.

Updated on October 8, 2021

More info: Link

Dependency:


Author

  • Danian
  • June 15, 2017

Link

Made with

  • HTML / Less

About the Code

CSS Checkmark Animation

code is pretty dirty, use at own risk.

Updated on April 10, 2018

More info: Link

Dependency:


Author

  • Andreas Storm
  • April 18, 2018

Link

Made with

  • Pug / Sass

About the Code

#CodePenChallenge – Checkbox

Updated on July 18, 2018

More info: Link

Dependency: bootstrap.css


Author

  • Milan Raring
  • March 5, 2020

Link

Made with

  • HTML / SCSS

About the Code

Checklist animation – Only CSS

Simple checklist animation.

Updated on April 6, 2020

More info: Link

Dependency:


Author

  • Artyom
  • February 10, 2017

Link

Made with

  • HTML / CSS / jQuery

About the Code

simple checkbox switcher

Checkboxes + labels + little jquery.

Updated on April 5, 2017

More info: Link

Dependency:


Author

  • Paweł Durczok
  • December 13, 2016

Link

Made with

  • HTML / SCSS

About the Code

Pure CSS Animated Checkbox

A pure HTML/CSS animated checkbox.

Updated on January 9, 2017

More info: Link

Dependency:


Author

  • Andreas Storm
  • June 7, 2017

Link

Made with

  • HTML / Sass

About the Code

Checkbox SVG Path Animation

Updated on June 12, 2017

More info: Link

Dependency:


Author

  • Irko Palenius
  • February 15, 2016

Link

Made with

  • HTML / CSS

About the Code

CSS Checkbox Inspiration

Updated on December 22, 2016

More info: Link

Dependency:


Author

  • Mike Quinn
  • May 5, 2017

Link

Made with

  • HTML / SCSS / JS

About the Code

checkbox with mo.js

Simple checkbox w mo.js animation.

Updated on March 13, 2018

More info: Link

Dependency: mo.min.js


Author

  • Adam Bottega
  • November 5, 2015

Link

Made with

  • HTML / SCSS

About the Code

Material UI style animated checkboxes

Updated on February 28, 2016

More info: Link

Dependency:


Author

  • Aaron Iker
  • December 29, 2020

Link

Made with

  • HTML / SCSS / JS

About the Code

Happy New Year

Firework from this awesome Pen.

Updated on December 31, 2020

More info: Link

Dependency: gsap.min.js, MorphSVGPlugin3.min.js, EasePack.min.js


Author

  • Aaron Iker
  • December 9, 2019

Link

Made with

  • HTML / SCSS

About the Code

Checkboxes

Updated on December 10, 2019

More info: Link

Dependency:


Author

  • P
  • January 23, 2021

Link

Made with

  • HTML / SCSS / JS

About the Code

Animated SVG Checkbox – Grenade

Updated on January 27, 2021

More info: Link

Dependency:


Author

  • P
  • January 21, 2021

Link

Made with

  • HTML / SCSS / JS

About the Code

Animated SVG Checkbox – Spin

Updated on January 26, 2021

More info: Link

Dependency:


Author

  • Josh Collinsworth
  • March 31, 2020

Link

Made with

  • HTML / SCSS / JS

About the Code

Emoji Pick Two

A tongue-in-cheek checklist to give to your next client.

Uses sass, emoji, vanilla JS (tried Vue at first, but it turned out to be less complicated to just handle everything in vanilla JS than to implement the proper watchers), and a sprinkling of variable fonts transformation.

Updated on March 19, 2021

More info: Link

Dependency:


Author

  • Olivia Ng
  • March 27, 2020

Link

Made with

  • HTML / SCSS / jQuery

About the Code

To-Do Terrarium

Not just a to-do list, it’s a covid quarantine to-do list.

More info: Link

Dependency: simple-line-icons.min.css, jquery.min.js, gsap.min.js, EasePack3.min.js, DrawSVGPlugin3.min.js


Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.