{"id":840,"date":"2019-05-12T19:45:40","date_gmt":"2019-05-12T19:45:40","guid":{"rendered":"http:\/\/csshint.com\/?p=840"},"modified":"2023-02-19T15:51:42","modified_gmt":"2023-02-19T15:51:42","slug":"css-checkboxes","status":"publish","type":"post","link":"https:\/\/csshint.com\/css-checkboxes\/","title":{"rendered":"48+ CSS Checkboxes"},"content":{"rendered":"<p>Browse 48+ free <strong>HTML and CSS custom checkbox<\/strong> examples: with image, material ui checkbox, with label, checked, etc.<\/p>\n<article class=\"inn-article\">\n<h4><span>1.<\/span>Touch-styled checkboxes<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Animated Ubuntu Touch-styled checkboxes\" src=\"\/\/codepen.io\/codewunder\/embed\/wJjBk\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/codewunder\/pen\/wJjBk\/'>Animated Ubuntu Touch-styled checkboxes<\/a> by Eduard Mayer<br \/>\n  (<a href='https:\/\/codepen.io\/codewunder'>@codewunder<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Eduard Mayer<\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/codewunder\/pen\/wJjBk\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n\n<article class=\"inn-article\">\n<h4><span>2.<\/span>Cardboard Check Box<\/h4>\n<p><iframe height=\"377\" style=\"width: 100%;\" scrolling=\"no\" title=\"Cardboard Check Box\" src=\"\/\/codepen.io\/simeydotme\/embed\/ZjyvXa\/?height=377&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/simeydotme\/pen\/ZjyvXa\/'>Cardboard Check Box<\/a> by Simon Goellner<br \/>\n  (<a href='https:\/\/codepen.io\/simeydotme'>@simeydotme<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Simon Goellner  <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS (SCSS) \/ JavaScript<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/simeydotme\/pen\/ZjyvXa\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n\n<article class=\"inn-article\">\n<h4><span>3.<\/span>Pure CSS Checkboxes<\/h4>\n<p><iframe height=\"338\" style=\"width: 100%;\" scrolling=\"no\" title=\"#CodePenChallenge | Pure CSS Checkboxes\" src=\"\/\/codepen.io\/melnik909\/embed\/YjGZqQ\/?height=338&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/melnik909\/pen\/YjGZqQ\/'>#CodePenChallenge | Pure CSS Checkboxes<\/a> by Stas Melnikov<br \/>\n  (<a href='https:\/\/codepen.io\/melnik909'>@melnik909<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Stas Melnikov <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/melnik909\/pen\/YjGZqQ\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n\n<article class=\"inn-article\">\n<h4><span>4.<\/span>Checkbox with emojis<\/h4>\n<p><iframe height=\"352\" style=\"width: 100%;\" scrolling=\"no\" title=\"\u2705 Emojibox - Checkbox with emojis\" src=\"\/\/codepen.io\/jouanmarcel\/embed\/MXdreK\/?height=352&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/jouanmarcel\/pen\/MXdreK\/'>\u2705 Emojibox &#8211; Checkbox with emojis<\/a> by Jouan Marcel<br \/>\n  (<a href='https:\/\/codepen.io\/jouanmarcel'>@jouanmarcel<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Jouan Marcel <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Pug) \/ CSS(Sass)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/jouanmarcel\/pen\/MXdreK\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>5.<\/span>Material Design Checkbox<\/h4>\n<p><iframe height=\"307\" style=\"width: 100%;\" scrolling=\"no\" title=\"Material Design Checkbox\" src=\"\/\/codepen.io\/andreasstorm\/embed\/deRvMy\/?height=307&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/andreasstorm\/pen\/deRvMy\/'>Material Design Checkbox<\/a> by Andreas Storm<br \/>\n  (<a href='https:\/\/codepen.io\/andreasstorm'>@andreasstorm<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Andreas Storm <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Stylus)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/andreasstorm\/pen\/deRvMy\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>6.<\/span>Toggle Button Animation<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Toggle Button Animation\" src=\"\/\/codepen.io\/aaroniker\/embed\/rZPeYQ\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/aaroniker\/pen\/rZPeYQ\/'>Toggle Button Animation<\/a> by Aaron Iker<br \/>\n  (<a href='https:\/\/codepen.io\/aaroniker'>@aaroniker<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Aaron Iker <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Sass) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/aaroniker\/pen\/rZPeYQ\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>7.<\/span>Pure CSS Skateboard Checkbox<\/h4>\n<p><iframe height=\"333\" style=\"width: 100%;\" scrolling=\"no\" title=\"Pure CSS Skateboard Checkbox\" src=\"\/\/codepen.io\/cobra_winfrey\/embed\/jxNLPo\/?height=333&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/cobra_winfrey\/pen\/jxNLPo\/'>Pure CSS Skateboard Checkbox<\/a> by Adam Kuhn<br \/>\n  (<a href='https:\/\/codepen.io\/cobra_winfrey'>@cobra_winfrey<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Adam Kuhn <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Haml) \/ CSS(Scss) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/jxNLPo\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>8.<\/span>Dumb Toggles<\/h4>\n<p><iframe height=\"355\" style=\"width: 100%;\" scrolling=\"no\" title=\"Dumb Toggles\" src=\"\/\/codepen.io\/cobra_winfrey\/embed\/wyKywZ\/?height=355&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/cobra_winfrey\/pen\/wyKywZ\/'>Dumb Toggles<\/a> by Adam Kuhn<br \/>\n  (<a href='https:\/\/codepen.io\/cobra_winfrey'>@cobra_winfrey<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Adam Kuhn <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Scss) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/wyKywZ\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>9.<\/span>Cool Checkbox with SVG!<\/h4>\n<p><iframe height=\"348\" style=\"width: 100%;\" scrolling=\"no\" title=\"Cool Checkbox with SVG!\" src=\"\/\/codepen.io\/lewis_adame\/embed\/BYYNgP\/?height=348&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/lewis_adame\/pen\/BYYNgP\/'>Cool Checkbox with SVG!<\/a> by Luis Adame<br \/>\n  (<a href='https:\/\/codepen.io\/lewis_adame'>@lewis_adame<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Luis Adame <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Pug) \/ CSS(Scss) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/lewis_adame\/pen\/BYYNgP\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>10.<\/span>Check Boxes<\/h4>\n<p><iframe height=\"325\" style=\"width: 100%;\" scrolling=\"no\" title=\"Check Boxes\" src=\"\/\/codepen.io\/LeonardMeagher2\/embed\/NvOLZr\/?height=325&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/LeonardMeagher2\/pen\/NvOLZr\/'>Check Boxes<\/a> by Leonard Meagher<br \/>\n  (<a href='https:\/\/codepen.io\/LeonardMeagher2'>@LeonardMeagher2<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Leonard Meagher <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Scss) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/LeonardMeagher2\/pen\/NvOLZr\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>11.<\/span>Custom Checkbox \/ Toggle Switch<\/h4>\n<p><iframe height=\"357\" style=\"width: 100%;\" scrolling=\"no\" title=\"Custom Checkbox \/ Toggle Switch\" src=\"\/\/codepen.io\/thelaazyguy\/embed\/MvqpPr\/?height=357&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/thelaazyguy\/pen\/MvqpPr\/'>Custom Checkbox \/ Toggle Switch<\/a> by thelaazyguy<br \/>\n  (<a href='https:\/\/codepen.io\/thelaazyguy'>@thelaazyguy<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> thelaazyguy <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/thelaazyguy\/pen\/MvqpPr\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>12.<\/span>Radio and Checkbox Styles<\/h4>\n<p><iframe height=\"410\" style=\"width: 100%;\" scrolling=\"no\" title=\"Radio and Checkbox Styles\" src=\"\/\/codepen.io\/MatthewShields\/embed\/XgeRWj\/?height=410&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/MatthewShields\/pen\/XgeRWj\/'>Radio and Checkbox Styles<\/a> by Matthew Shields<br \/>\n  (<a href='https:\/\/codepen.io\/MatthewShields'>@MatthewShields<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Matthew Shields<\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/MatthewShields\/pen\/XgeRWj\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>13.<\/span>Style Checkboxes using CSS<\/h4>\n<p><iframe height=\"351\" style=\"width: 100%;\" scrolling=\"no\" title=\"Style Checkboxes - using CSS custom properties\" src=\"\/\/codepen.io\/katheer\/embed\/jwwNZL\/?height=351&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/katheer\/pen\/jwwNZL\/'>Style Checkboxes &#8211; using CSS custom properties<\/a> by Katheer  Mizal<br \/>\n  (<a href='https:\/\/codepen.io\/katheer'>@katheer<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Katheer Mizal <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/katheer\/pen\/jwwNZL\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>14.<\/span>3D Switcher Vll Plus<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"[CSS] 3D Switcher Vll Plus\" src=\"\/\/codepen.io\/Rplus\/embed\/vZgMxM\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/Rplus\/pen\/vZgMxM\/'>[CSS] 3D Switcher Vll Plus<\/a> by Rplus<br \/>\n  (<a href='https:\/\/codepen.io\/Rplus'>@Rplus<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Rplus <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Pug) \/ CSS(SCSS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/Rplus\/pen\/vZgMxM\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>15.<\/span>CSS Checkmark Animation<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS Checkmark Animation\" src=\"\/\/codepen.io\/daniandl\/embed\/OgbXzK\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/daniandl\/pen\/OgbXzK\/'>CSS Checkmark Animation<\/a> by Danian<br \/>\n  (<a href='https:\/\/codepen.io\/daniandl'>@daniandl<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Danian <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Less)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/daniandl\/pen\/OgbXzK\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>16.<\/span>Checkbox SVG Path Animation<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Checkbox SVG Path Animation\" src=\"\/\/codepen.io\/andreasstorm\/embed\/Mowqre\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/andreasstorm\/pen\/Mowqre\/'>Checkbox SVG Path Animation<\/a> by Andreas Storm<br \/>\n  (<a href='https:\/\/codepen.io\/andreasstorm'>@andreasstorm<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Andreas Storm <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SASS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/andreasstorm\/pen\/Mowqre\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>17.<\/span>Pure CSS Toggle slider\/checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Pure CSS  Toggle slider\/checkbox with SVG tick and cross\" src=\"\/\/codepen.io\/webdevian\/embed\/NjQdKK\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/webdevian\/pen\/NjQdKK\/'>Pure CSS  Toggle slider\/checkbox with SVG tick and cross<\/a> by Ian Egner<br \/>\n  (<a href='https:\/\/codepen.io\/webdevian'>@webdevian<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Ian Egner <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SASS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/webdevian\/pen\/NjQdKK\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>18.<\/span>little checkboxes<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Happy little checkboxes (updated)\" src=\"\/\/codepen.io\/landb\/embed\/pRQPNX\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/landb\/pen\/pRQPNX\/'>Happy little checkboxes (updated)<\/a> by Branko Stancevic<br \/>\n  (<a href='https:\/\/codepen.io\/landb'>@landb<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Branko Stancevic <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Pug) \/ CSS(SASS) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/landb\/pen\/pRQPNX\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>19.<\/span>Full CSS checkbox<\/h4>\n<p><iframe height=\"356\" style=\"width: 100%;\" scrolling=\"no\" title=\"Full CSS checkbox\" src=\"\/\/codepen.io\/TimGuignard\/embed\/pRKdvV\/?height=356&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/TimGuignard\/pen\/pRKdvV\/'>Full CSS checkbox<\/a> by Timothee Guignard<br \/>\n  (<a href='https:\/\/codepen.io\/TimGuignard'>@TimGuignard<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Timothee Guignard <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Haml) \/ CSS(SCSS) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/TimGuignard\/pen\/pRKdvV\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>20.<\/span>Custom checkboxes, Radio buttons<\/h4>\n<p><iframe height=\"343\" style=\"width: 100%;\" scrolling=\"no\" title=\"Completely CSS: Custom checkboxes, radio buttons and select boxes\" src=\"\/\/codepen.io\/KenanYusuf\/embed\/PZKEKd\/?height=343&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/KenanYusuf\/pen\/PZKEKd\/'>Completely CSS: Custom checkboxes, radio buttons and select boxes<\/a> by Kenan Yusuf<br \/>\n  (<a href='https:\/\/codepen.io\/KenanYusuf'>@KenanYusuf<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Kenan Yusuf <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Stylus) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/KenanYusuf\/pen\/PZKEKd\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>21.<\/span>Pure CSS Animated Checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Pure CSS Animated Checkbox\" src=\"\/\/codepen.io\/north-of-rapture\/embed\/rWqega\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/north-of-rapture\/pen\/rWqega\/'>Pure CSS Animated Checkbox<\/a> by Pawe\u0142 Durczok<br \/>\n  (<a href='https:\/\/codepen.io\/north-of-rapture'>@north-of-rapture<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Pawe\u0142 Durczok <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/north-of-rapture\/pen\/rWqega\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>22.<\/span>simple checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Elegantly simple checkbox\" src=\"\/\/codepen.io\/bdan\/embed\/jAkZZK\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/bdan\/pen\/jAkZZK\/'>Elegantly simple checkbox<\/a> by Bogdan<br \/>\n  (<a href='https:\/\/codepen.io\/bdan'>@bdan<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Bogdan <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Less) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/bdan\/pen\/jAkZZK\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>23.<\/span>Google material style checkbox<\/h4>\n<p><iframe height=\"357\" style=\"width: 100%;\" scrolling=\"no\" title=\"Google material style checkbox (css only)\" src=\"\/\/codepen.io\/Sambego\/embed\/zDLxe\/?height=357&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/Sambego\/pen\/zDLxe\/'>Google material style checkbox (css only)<\/a> by Sam<br \/>\n  (<a href='https:\/\/codepen.io\/Sambego'>@Sambego<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Sam <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/Sambego\/pen\/zDLxe\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>24.<\/span>Custom CSS Checkbox<\/h4>\n<p><iframe height=\"332\" style=\"width: 100%;\" scrolling=\"no\" title=\"Custom CSS Checkbox\" src=\"\/\/codepen.io\/derekmorash\/embed\/Eydxab\/?height=332&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/derekmorash\/pen\/Eydxab\/'>Custom CSS Checkbox<\/a> by Derek Morash<br \/>\n  (<a href='https:\/\/codepen.io\/derekmorash'>@derekmorash<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Derek Morash <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(Less) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/derekmorash\/pen\/Eydxab\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>25.<\/span>Pure CSS toggle buttons<\/h4>\n<p><iframe height=\"341\" style=\"width: 100%;\" scrolling=\"no\" title=\"Pure CSS toggle buttons\" src=\"\/\/codepen.io\/mallendeo\/embed\/eLIiG\/?height=341&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mallendeo\/pen\/eLIiG\/'>Pure CSS toggle buttons<\/a> by Mauricio Allende<br \/>\n  (<a href='https:\/\/codepen.io\/mallendeo'>@mallendeo<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Mauricio Allende <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Pug) \/ CSS(SCSS) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/mallendeo\/pen\/eLIiG\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>26.<\/span>SVG Checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"SVG Checkbox\" src=\"\/\/codepen.io\/grayghostvisuals\/embed\/gbEMNy\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/grayghostvisuals\/pen\/gbEMNy\/'>SVG Checkbox<\/a> by GRAY GHOST<br \/>\n  (<a href='https:\/\/codepen.io\/grayghostvisuals'>@grayghostvisuals<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  GRAY GHOST <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/grayghostvisuals\/pen\/gbEMNy\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>27.<\/span>Custom Checkbox<\/h4>\n<p><iframe height=\"317\" style=\"width: 100%;\" scrolling=\"no\" title=\"Custom Checkbox\" src=\"\/\/codepen.io\/mattdrose\/embed\/iswyE\/?height=317&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mattdrose\/pen\/iswyE\/'>Custom Checkbox<\/a> by mattdrose<br \/>\n  (<a href='https:\/\/codepen.io\/mattdrose'>@mattdrose<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  mattdrose <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/mattdrose\/pen\/iswyE\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>28.<\/span>Fluid Checkboxes<\/h4>\n<p><iframe height=\"408\" style=\"width: 100%;\" scrolling=\"no\" title=\"Fluid Checkboxes\" src=\"\/\/codepen.io\/BjornRombaut\/embed\/pyLMxY\/?height=408&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/BjornRombaut\/pen\/pyLMxY\/'>Fluid Checkboxes<\/a> by Bjorn<br \/>\n  (<a href='https:\/\/codepen.io\/BjornRombaut'>@BjornRombaut<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Bjorn <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Pug) \/ CSS(SCSS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/BjornRombaut\/pen\/pyLMxY\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>29.<\/span>Morphing css checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Morphing css checkbox\" src=\"\/\/codepen.io\/sderoij\/embed\/VvJJwE\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/sderoij\/pen\/VvJJwE\/'>Morphing css checkbox<\/a> by Sjoerd de Roij<br \/>\n  (<a href='https:\/\/codepen.io\/sderoij'>@sderoij<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Sjoerd de Roij <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/sderoij\/pen\/VvJJwE\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>30.<\/span>Custom checkbox with svg<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Custom checkbox with svg marker\" src=\"\/\/codepen.io\/rolchau\/embed\/rlAtq\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/rolchau\/pen\/rlAtq\/'>Custom checkbox with svg marker<\/a> by Tommy Rolchau Mathiesen<br \/>\n  (<a href='https:\/\/codepen.io\/rolchau'>@rolchau<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Tommy Rolchau Mathiesen <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS)<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/rolchau\/pen\/rlAtq\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>31.<\/span>Flat UI &#8211; Checkbox FIX<\/h4>\n<p><iframe height=\"353\" style=\"width: 100%;\" scrolling=\"no\" title=\"Flat UI - Checkbox FIX\" src=\"\/\/codepen.io\/ARS\/embed\/aeDHE\/?height=353&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/ARS\/pen\/aeDHE\/'>Flat UI &#8211; Checkbox FIX<\/a> by Arsen Zbidniakov<br \/>\n  (<a href='https:\/\/codepen.io\/ARS'>@ARS<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Arsen Zbidniakov <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/ARS\/pen\/aeDHE\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>32.<\/span>Checkbox\/Radio\/Toggle Switches<\/h4>\n<p><iframe height=\"395\" style=\"width: 100%;\" scrolling=\"no\" title=\"Variable Based Inputs - Checkbox\/Radio\/Toggle Switches\" src=\"\/\/codepen.io\/jcgilmore2\/embed\/PZpmaK\/?height=395&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/jcgilmore2\/pen\/PZpmaK\/'>Variable Based Inputs &#8211; Checkbox\/Radio\/Toggle Switches<\/a> by James Gilmore<br \/>\n  (<a href='https:\/\/codepen.io\/jcgilmore2'>@jcgilmore2<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  James Gilmore <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/jcgilmore2\/pen\/PZpmaK\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>33.<\/span>Motion Checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Motion Checkbox\" src=\"\/\/codepen.io\/JonasBadalic\/embed\/wKEWjG\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/JonasBadalic\/pen\/wKEWjG\/'>Motion Checkbox<\/a> by Jonas Badalic<br \/>\n  (<a href='https:\/\/codepen.io\/JonasBadalic'>@JonasBadalic<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Jonas Badalic <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/JonasBadalic\/pen\/wKEWjG\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>34.<\/span>SVG Checkbox animation<\/h4>\n<p><iframe height=\"331\" style=\"width: 100%;\" scrolling=\"no\" title=\"SVG Checkbox animation\" src=\"\/\/codepen.io\/JonasBadalic\/embed\/bVWoWX\/?height=331&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/JonasBadalic\/pen\/bVWoWX\/'>SVG Checkbox animation<\/a> by Jonas Badalic<br \/>\n  (<a href='https:\/\/codepen.io\/JonasBadalic'>@JonasBadalic<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Jonas Badalic <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) \/ js<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/JonasBadalic\/pen\/bVWoWX\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>35.<\/span>Gooey toggle switch<\/h4>\n<p><iframe height=\"315\" style=\"width: 100%;\" scrolling=\"no\" title=\"Gooey toggle switch\" src=\"\/\/codepen.io\/onediv\/embed\/pjgNqJ\/?height=315&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/onediv\/pen\/pjgNqJ\/'>Gooey toggle switch<\/a> by Vincent Durand<br \/>\n  (<a href='https:\/\/codepen.io\/onediv'>@onediv<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Vincent Durand <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/onediv\/pen\/pjgNqJ\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>36.<\/span>Pure CSS Toggles<\/h4>\n<p><iframe height=\"361\" style=\"width: 100%;\" scrolling=\"no\" title=\"Pure CSS Toggles\" src=\"\/\/codepen.io\/rgg\/embed\/waEYye\/?height=361&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/rgg\/pen\/waEYye\/'>Pure CSS Toggles<\/a> by Rafael Gonz\u00e1lez<br \/>\n  (<a href='https:\/\/codepen.io\/rgg'>@rgg<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Rafael Gonz\u00e1lez <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/rgg\/pen\/waEYye\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>37.<\/span>Custom checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Custom checkbox\" src=\"\/\/codepen.io\/valerypatorius\/embed\/oXGMGL\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/valerypatorius\/pen\/oXGMGL\/'>Custom checkbox<\/a> by Valery<br \/>\n  (<a href='https:\/\/codepen.io\/valerypatorius'>@valerypatorius<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Valery <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/valerypatorius\/pen\/oXGMGL\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>38.<\/span>Delightful Checkbox Animation<\/h4>\n<p><iframe height=\"427\" style=\"width: 100%;\" scrolling=\"no\" title=\"[Pure CSS] Delightful Checkbox Animation\" src=\"\/\/codepen.io\/dylanraga\/embed\/Qwqbab\/?height=427&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/dylanraga\/pen\/Qwqbab\/'>[Pure CSS] Delightful Checkbox Animation<\/a> by Dylan Raga<br \/>\n  (<a href='https:\/\/codepen.io\/dylanraga'>@dylanraga<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Dylan Raga <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/dylanraga\/pen\/Qwqbab\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>39.<\/span>Styling checkboxes and radio buttons<\/h4>\n<p><iframe height=\"418\" style=\"width: 100%;\" scrolling=\"no\" title=\"Styling checkboxes and radio buttons with CSS\" src=\"\/\/codepen.io\/8bitcode\/embed\/vEXaww\/?height=418&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/8bitcode\/pen\/vEXaww\/'>Styling checkboxes and radio buttons with CSS<\/a> by 8bit code<br \/>\n  (<a href='https:\/\/codepen.io\/8bitcode'>@8bitcode<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  8bit code <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/8bitcode\/pen\/vEXaww\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>40.<\/span>Animated Checkboxes<\/h4>\n<p><iframe height=\"360\" style=\"width: 100%;\" scrolling=\"no\" title=\"Animated Checkboxes\" src=\"\/\/codepen.io\/jaradlight\/embed\/IEbKq\/?height=360&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/jaradlight\/pen\/IEbKq\/'>Animated Checkboxes<\/a> by Jarad Light<br \/>\n  (<a href='https:\/\/codepen.io\/jaradlight'>@jaradlight<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Jarad Light <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/jaradlight\/pen\/IEbKq\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>41.<\/span>Simple styled checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Simple styled checkbox\" src=\"\/\/codepen.io\/cabrera\/embed\/mKoBa\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/cabrera\/pen\/mKoBa\/'>Simple styled checkbox<\/a> by Juan Cabrera<br \/>\n  (<a href='https:\/\/codepen.io\/cabrera'>@cabrera<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Juan Cabrera <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Slim) \/ CSS(SCSS) <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/cabrera\/pen\/mKoBa\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>42.<\/span>Custom Checkbox<\/h4>\n<p><iframe height=\"335\" style=\"width: 100%;\" scrolling=\"no\" title=\"Custom Checkbox\" src=\"\/\/codepen.io\/AndreCortellini\/embed\/yhrlJ\/?height=335&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/AndreCortellini\/pen\/yhrlJ\/'>Custom Checkbox<\/a> by Andr\u00e9 Cortellini<br \/>\n  (<a href='https:\/\/codepen.io\/AndreCortellini'>@AndreCortellini<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Andr\u00e9 Cortellini <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/AndreCortellini\/pen\/yhrlJ\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>43.<\/span>Checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Checkbox\" src=\"\/\/codepen.io\/KevinChassagne\/embed\/DAqro\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/KevinChassagne\/pen\/DAqro\/'>Checkbox<\/a> by K\u00e9vin Chassagne<br \/>\n  (<a href='https:\/\/codepen.io\/KevinChassagne'>@KevinChassagne<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>   K\u00e9vin Chassagne <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/KevinChassagne\/pen\/DAqro\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>44.<\/span>Semantic CSS Animated Checkboxes<\/h4>\n<p><iframe height=\"327\" style=\"width: 100%;\" scrolling=\"no\" title=\"Semantic CSS Animated Checkboxes\" src=\"\/\/codepen.io\/dganoff\/embed\/GAcHv\/?height=327&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/dganoff\/pen\/GAcHv\/'>Semantic CSS Animated Checkboxes<\/a> by Demetri Ganoff<br \/>\n  (<a href='https:\/\/codepen.io\/dganoff'>@dganoff<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Demetri Ganoff <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/dganoff\/pen\/GAcHv\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>45.<\/span>CSS-only animated checkbox<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"CSS-only animated checkbox\" src=\"\/\/codepen.io\/timseverien\/embed\/Fkfhi\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/timseverien\/pen\/Fkfhi\/'>CSS-only animated checkbox<\/a> by Tim Severien<br \/>\n  (<a href='https:\/\/codepen.io\/timseverien'>@timseverien<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Tim Severien <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/timseverien\/pen\/Fkfhi\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>46.<\/span>Custom CSS Checkbox<\/h4>\n<p><iframe height=\"373\" style=\"width: 100%;\" scrolling=\"no\" title=\"Custom CSS Checkbox\" src=\"\/\/codepen.io\/wallaceerick\/embed\/Czqso\/?height=373&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/wallaceerick\/pen\/Czqso\/'>Custom CSS Checkbox<\/a> by Wallace Erick<br \/>\n  (<a href='https:\/\/codepen.io\/wallaceerick'>@wallaceerick<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li>  Wallace Erick <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS(SCSS) \/ JS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/wallaceerick\/pen\/Czqso\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>47.<\/span>Flat Toggle Switch<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Flat Toggle Switch\" src=\"\/\/codepen.io\/dervondenbergen\/embed\/BjJbx\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/dervondenbergen\/pen\/BjJbx\/'>Flat Toggle Switch<\/a> by Felix De Montis<br \/>\n  (<a href='https:\/\/codepen.io\/dervondenbergen'>@dervondenbergen<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Felix De Montis  <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML(Haml) \/ CSS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/dervondenbergen\/pen\/BjJbx\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>48.<\/span>Checkbox css<\/h4>\n<p><iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Checkbox css\" src=\"\/\/codepen.io\/pixelslip\/embed\/fyqir\/?height=265&#038;theme-id=0&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/pixelslip\/pen\/fyqir\/'>Checkbox css<\/a> by pixelslip<br \/>\n  (<a href='https:\/\/codepen.io\/pixelslip'>@pixelslip<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> pixelslip <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/pixelslip\/pen\/fyqir\/\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n<article class=\"inn-article\">\n<h4><span>49.<\/span>Pencil and Paper Checkboxes<\/h4>\n<p><a href=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/CSS-checkbox.gif\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/CSS-checkbox.gif\" alt=\"CSS checkbox\" width=\"658\" height=\"330\" class=\"aligncenter size-full wp-image-849\" \/><\/a><\/p>\n<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4>Author<\/h4>\n<ul>\n<li> Jon Kantner <\/li>\n<\/ul><\/div>\n<div class=\"info info-frontend\">\n<h4>Made with<\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS (SCSS) \/ JavaScript<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<p><a href=\"https:\/\/codepen.io\/jkantner\/pen\/wEeWWG\" class=\"btn_blue floatleft\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">demo and code<\/a> <a href=\"https:\/\/bluehost.sjv.io\/9WXqK0\" class=\"btn_blue floatleft red-btn\" target=\"_blank\" rel=\"external nofollow noopener noreferrer\">Get Hosting<\/a><\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Browse 48+ free HTML and CSS custom checkbox examples: with image, material ui checkbox, with label, checked, etc. 1.Touch-styled checkboxes See the Pen Animated Ubuntu Touch-styled checkboxes by Eduard Mayer (@codewunder) on CodePen. Author Eduard Mayer Made with HTML \/ CSS demo and code Get Hosting 2.Cardboard Check Box See the Pen Cardboard Check Box [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":849,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,2],"tags":[100,99,101],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>48+ CSS Checkboxes - csshint - A designer hub<\/title>\n<meta name=\"description\" content=\"Browse 48+ free HTML and CSS custom checkbox examples: with image, with label, checked, etc. css checkbox codepen, material ui checkbox\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/csshint.com\/css-checkboxes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"48+ CSS Checkboxes - csshint - A designer hub\" \/>\n<meta property=\"og:description\" content=\"Browse 48+ free HTML and CSS custom checkbox examples: with image, with label, checked, etc. css checkbox codepen, material ui checkbox\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csshint.com\/css-checkboxes\/\" \/>\n<meta property=\"og:site_name\" content=\"csshint - A designer hub\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-12T19:45:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-19T15:51:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/CSS-checkbox.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"658\" \/>\n\t<meta property=\"og:image:height\" content=\"330\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csshint.com\/css-checkboxes\/\",\"url\":\"https:\/\/csshint.com\/css-checkboxes\/\",\"name\":\"48+ CSS Checkboxes - csshint - A designer hub\",\"isPartOf\":{\"@id\":\"https:\/\/csshint.com\/#website\"},\"datePublished\":\"2019-05-12T19:45:40+00:00\",\"dateModified\":\"2023-02-19T15:51:42+00:00\",\"author\":{\"@id\":\"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed\"},\"description\":\"Browse 48+ free HTML and CSS custom checkbox examples: with image, with label, checked, etc. css checkbox codepen, material ui checkbox\",\"breadcrumb\":{\"@id\":\"https:\/\/csshint.com\/css-checkboxes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csshint.com\/css-checkboxes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csshint.com\/css-checkboxes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csshint.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"48+ CSS Checkboxes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/csshint.com\/#website\",\"url\":\"https:\/\/csshint.com\/\",\"name\":\"csshint - A designer hub\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/csshint.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csshint.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/csshint.com\/author\/21232f297a57a5a743894a0e4a801fc3\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"48+ CSS Checkboxes - csshint - A designer hub","description":"Browse 48+ free HTML and CSS custom checkbox examples: with image, with label, checked, etc. css checkbox codepen, material ui checkbox","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/csshint.com\/css-checkboxes\/","og_locale":"en_US","og_type":"article","og_title":"48+ CSS Checkboxes - csshint - A designer hub","og_description":"Browse 48+ free HTML and CSS custom checkbox examples: with image, with label, checked, etc. css checkbox codepen, material ui checkbox","og_url":"https:\/\/csshint.com\/css-checkboxes\/","og_site_name":"csshint - A designer hub","article_published_time":"2019-05-12T19:45:40+00:00","article_modified_time":"2023-02-19T15:51:42+00:00","og_image":[{"width":658,"height":330,"url":"https:\/\/csshint.com\/wp-content\/uploads\/2019\/05\/CSS-checkbox.gif","type":"image\/gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/csshint.com\/css-checkboxes\/","url":"https:\/\/csshint.com\/css-checkboxes\/","name":"48+ CSS Checkboxes - csshint - A designer hub","isPartOf":{"@id":"https:\/\/csshint.com\/#website"},"datePublished":"2019-05-12T19:45:40+00:00","dateModified":"2023-02-19T15:51:42+00:00","author":{"@id":"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed"},"description":"Browse 48+ free HTML and CSS custom checkbox examples: with image, with label, checked, etc. css checkbox codepen, material ui checkbox","breadcrumb":{"@id":"https:\/\/csshint.com\/css-checkboxes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csshint.com\/css-checkboxes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/csshint.com\/css-checkboxes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csshint.com\/"},{"@type":"ListItem","position":2,"name":"48+ CSS Checkboxes"}]},{"@type":"WebSite","@id":"https:\/\/csshint.com\/#website","url":"https:\/\/csshint.com\/","name":"csshint - A designer hub","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/csshint.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/csshint.com\/#\/schema\/person\/cb7f50f1548129c9d49a956bb3cb47ed","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csshint.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d55cf671fd71468918e23ab6bcbb9566?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/csshint.com\/author\/21232f297a57a5a743894a0e4a801fc3\/"}]}},"_links":{"self":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts\/840"}],"collection":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/comments?post=840"}],"version-history":[{"count":6,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts\/840\/revisions"}],"predecessor-version":[{"id":8142,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/posts\/840\/revisions\/8142"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/media\/849"}],"wp:attachment":[{"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/media?parent=840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/categories?post=840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csshint.com\/wp-json\/wp\/v2\/tags?post=840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}