<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Flat Checkboxes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  </head>
  <body>
    <div class="container">
      <h1>Flat Checkboxes</h1>
      <h2>by <a title="juanjo_fr on Twitter" target="_blank" href="https://twitter.com/juanjo_fr">@juanjo_fr</a></h2>
      <div>
        <input type="checkbox" id="rounded" />
        <label for="rounded"></label>
      </div>
      <div>
        <input type="checkbox" id="squared" />
        <label for="squared"></label>
      </div>
    </div>
  </body>
</html>

body {
  background-color: #EEE;
  font: 16px/1.2 "Fira Sans", sans-serif;
}
.container {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 20rem;
  height: 20rem;
  background-color: #FFF;
}
h2 { color: #AAA; }
a {
  text-decoration: none;
  padding: 0 .6rem;
  background-color: #666;
  color: #AAA;
  -webkit-transition: color .2s ease-in-out, background-color .2s ease-in-out;
          transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
a:hover {
  text-decoration: none;
  background-color: #DDD;
  color: #333;
}
.container > div {
  margin: 2rem auto;
}

/* Rounded */
.container > div:first-of-type {
  width: 5.5rem;
  height: 2.5rem;
  position: relative;
}
.container > div:first-of-type input {
  opacity: 0;
}
.container > div:first-of-type label {
  position: absolute;
  background-color: #e9513a;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 3.125rem;
  -webkit-transition: background-color .2s ease-in-out;
          transition: background-color .2s ease-in-out;
}
.container > div:first-of-type label:after {
  content: "";
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 3.125rem;
  cursor: pointer;
  position: absolute;
  top: .3125rem;
  z-index: 1;
  left: .5rem;
  background-color: #FFFFFD;
  -webkit-transition: left .2s ease-in-out;
          transition: left .2s ease-in-out;
}
.container > div:first-of-type input[type=checkbox]:checked ~ label {
  background-color: #4fbe79;
}

.container > div:first-of-type input[type=checkbox]:checked ~ label:after {
  left: 3.125rem;
}

/* Squared */
.container > div:last-of-type {
  width: 6rem;
  height: 2.5rem;
  position: relative;
}
.container > div:last-of-type input {
  opacity: 0;
}
.container > div:last-of-type label {
  position: absolute;
  background-color: #e9513a;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transition: background-color .2s ease-in-out;
          transition: background-color .2s ease-in-out;
}
.container > div:last-of-type label:before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1.5rem;
  cursor: pointer;
  position: absolute;
  top: .5rem;
  z-index: 1;
  left: .5rem;
  background: #FFF;
  -webkit-transition: left .2s ease-in-out;
          transition: left .2s ease-in-out;
}
.container > div:last-of-type label:after {
  color: #ccc;
  content:'|||';
  letter-spacing: .0625rem;
  position: absolute;
  left: 1.1rem;
  top: .75rem;
  z-index: 1;
  -webkit-transition: left .2s ease-in-out;
          transition: left .2s ease-in-out;
}
.container > div:last-of-type input[type=checkbox]:checked ~ label {
  background-color: #4fbe79;
}
.container > div:last-of-type input[type=checkbox]:checked ~ label:before {
  left: 3rem;
}
.container > div:last-of-type input[type=checkbox]:checked ~ label:after {
  left: 3.6rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.