<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>

<div class="container">
  <div class="button-big">
      <input type="checkbox" id="checked" class="click">
      <label for="checked"><div class="button-small"></div></label>
      <div class="bg"></div>
  </div>
</div>

<div class="profile">
  <i class="fab fa-codepen" id="codepen"></i>
  <p class="author"><a href="https://codepen.io/jorgert1205/#" target="_blank">/Jorgert1205</a></p>
</div>

<footer class="footer">
  This pen was made by <span>Jorge Reyes</span>.
</footer>
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

body {
  background-color: #ecf0f1;
  font-family: 'Lato', sans-serif;
  overflow: hidden;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"%3E%3C/path%3E%3C/svg%3E');
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90vh;
  position: relative;
}

.button-big {
  width: 200px;
  height: 100px;
  border-radius: 50px;
  background-image: linear-gradient(to right bottom, #dadfe1, #abb7b7);
  position: relative;
  box-shadow: 0px 2px 4px rgba(0,0,0,.4),
    inset 2px 4px 4px rgba(255,255,255,.4);
}

.button-small {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 70px;
  border-radius: 50px;
  box-shadow: inset 2px 4px 4px -2px rgba(255, 255, 255, .6),
    0px 4px 4px rgba(0,0,0,.2);
    background-image: linear-gradient(to right bottom, #dadfe1 ,#abb7b7);
}

.click {
  display: none;
}

.click:checked + label .button-small{
          background-image: linear-gradient(to right bottom, #abb7b7 ,#dadfe1);
      box-shadow: inset 2px 2px 4px rgba(0,0,0,.1),
        inset -2px -2px 4px rgba(255, 255,255, .4);
}

.click:checked ~ .bg {
    transform: scale(80);
    background-color: lighten(black, 20%);
    transition: .4s;
}

.click ~.bg {
  transition: .4s;
}


.bg {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  transition: .4s;
  z-index: -1;
}

.profile {
  color: #555;
  position: absolute;
  top: .5rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  
  .fa-codepen {
    margin-right: .5rem;
  }
  
  .author {
      
      a:link,
    a:visited {
        color: inherit;
        text-transform: uppercase;
        font-weight: 400;
      text-decoration: none;
    }
  }
  
}

.footer {
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #cdd1d6;
  background-color: #dee1e5;
  font-weight: 300;
  color: #555;
  position: relative;
  z-index: -2;
  
  
  span {
    margin-left: 2px;
    font-weight: 400;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.