A Pen by Joe Dix

Thumbnail
This awesome code was written by dixign, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dixign ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Joe Dix</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <label for="toggle-box" class="toggle">
  <input type="checkbox" name="toggle-box" id="toggle-box">
  <div class="toggle-thing"></div>
</label>
<br/><br/>
<label for="toggle-button" class="button">
  <input type="checkbox" name="toggle-button" id="toggle-button">
  <div class="toggle-button"></div>
</label>
<br/><br/>
<label for="toggle-box-small" class="toggle small">
  <input type="checkbox" name="toggle-box" id="toggle-box-small">
  <div class="toggle-thing"></div>
</label>
<br/><br/>
<label for="toggle-button-small" class="button small">
  <input type="checkbox" name="toggle-button" id="toggle-button-small">
  <div class="toggle-button"></div>
</label>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dixign/a-pen-by-joe-dix-ZydXwR */
.toggle.small, .button.small {
  transform:scale(0.8);
}

.toggle { 
  background:white;
  border-radius: 0.3em;
  box-shadow: inset 0.4em 0.4em 0em rgba(0,0,0,0.4);
  cursor: pointer;
  display: block;
  height:3.5em;
  overflow: hidden;
  position: relative;
  width:7em;
}

.toggle input, .button input{
  display:none;
}

.toggle .toggle-thing  {
  background: #DA1D52;
  box-shadow: 0.4em 0.4em 0em rgba(0,0,0,0.4);
  display:block;
  height: 100%;
  left:0%;
  position: absolute;
  top:0;
  transition: 0.4s ease-in;
  width:50%;
}

  .toggle input[type=checkbox]:checked ~ .toggle-thing {
    background: #8CC63F;
    left:50%;
  }

  .toggle .toggle-thing:after, .button .toggle-button:after {
    animation-name: turnoff;
    animation-duration: 0.5s;
    color: white;
    content: "\f00d";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 2em;
    margin-top:-0.5em;
    position: absolute;
    text-align: center;
    text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    top:50%;
    width:100%;
  }

.toggle input[type=checkbox]:checked ~ .toggle-thing:after, .button input[type=checkbox]:checked ~ .toggle-button:after {
      animation-name: turnon;
      animation-duration: 0.5s;
      content: "\f00c";
}

@keyframes turnoff {
    0% {
      content: "\f00c";
      transform: scale(1); 
  }
    50% {
      content: "\f00c";
      transform: scale(0.3); 
  }
    100% {
      content: "\f00d";
      transform: scale(1); 
  }
}

@keyframes turnon {
    0% {
      content: "\f00d";
      transform: scale(1); 
  }
    50% {
      content: "\f00d";
      transform: scale(0.3); 
  }
    100% {
      content: "\f00c";
      transform: scale(1); 
  }
}

.button .toggle-button {
  background: #DA1D52;
  border-radius:0.3em;
  cursor: pointer;
  height:3em;
  margin-top:0em;
  position:relative;
  transition: 0.5s;
  width:3em;
}

.button .toggle-button:before {
  background: #870529;
  border-radius: 0.3em;
  content:"";
  height:1.3em;
  position: absolute;
  top:2.4em;
  transition:0.5s;
  width:100%;
  z-index:-1;
}

.button input[type=checkbox]:checked ~ .toggle-button {
  background: #8CC63F;
  margin-top:0.7em;
}



.button input[type=checkbox]:checked ~ .toggle-button:before {
  background: #497c06;
  top: 1.7em;
}


Comments