A Pen by Pavel

Thumbnail
This awesome code was written by --pk--, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright --pk-- ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Pavel</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--[if lte IE 10 ]>
   <div class="old-ie">
<![endif]-->

<label class="checkbox">
    <input type="checkbox" class="checkbox__input" />  
    <span class="checkbox__label">Touch me!</span>
</label>

<!--[if lte IE 10 ]>
  </div>
<![endif]-->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/--pk--/a-pen-by-pavel-QdyjLd */
/* Layer over the natural checkbox: we can not style input[checkbox] directly */

.checkbox__label:before {
  content: '‚óŹ';
  display: block;
  height: 2.5rem;
  width: 2.5rem;
  position: absolute;
  top: 0;
  left: 0;
  padding-left:7px;
  background:white;
  color: DarkSlateGrey ;
}

/* Faux checkbox: we can not style input[checkbox] directly */

.checkbox__label:after {
  content: ' ';
  display: block;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  border: .35rem solid #48440E;
  transition: 200ms;
  position: absolute;
  top: 0;
  left: 0;
  background: white;  
}

/* Animation
   ---------
*/

.checkbox__label:after {
  transition: 200ms ease-in-out;
}

/* Look after animation finishes
   -----------------------------
*/

.checkbox__input:checked ~ .checkbox__label:after {
  xborder-top-style: none; 
  xborder-right-style: none;
  -ms-transform: rotate(180deg); /* IE9 */
  transform: rotatex(180deg);
  background: none;
  border-color: green;
}

.old-ie .checkbox__label:before,
.old-ie .checkbox__label:after {
  display: none;
}

/* Not so important:
   -----------------
*/

.checkbox {
  position: relative;    
  font-size: 4em;
  display: flex;
  font-family: 'Roboto Condensed', sans;
  letter-spacing: -.05em;
  cursor: pointer;
  /* Mobile Safari: */
  -webkit-tap-highlight-color: rgba(0,0,0,0);   
}

.checkbox__label:after:hover,
.checkbox__label:after:active {
   border-color: green; 
}  

.checkbox__label {
  margin-left: 2.5rem;
  line-height: .75;  
}

.meta {
  font-size: .75em;
  margin-top: 5em;
}

body {
  padding: 3em;
}

Comments