AmtvB

AmtvB.markdown

AmtvB

A Pen by Cameron on CodePen.

License.

index.haml

%button <i class="fa fa-power-off"></i>

script.js

$("button").click(function() {
  $("body").toggleClass("active");
})

style.scss

$primary: #555;
$accent: darken($primary, 11%);
$accent2: lighten($primary, 18%);

body {
  background: $primary fixed;
  transition: background 1s linear;
  &.active {
    background: linear-gradient(45deg,  gold, $primary) gold fixed;
  }
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 40px;
  background: linear-gradient(135deg,  $accent2, #444);
  border: 15px solid $accent;
  border-radius: 100%;
  box-shadow: 2px 3px 5px transparentize($accent2, .8);
  outline: none;
  transform: translate(-50%, -50%);
  .fa {
    font-size: 4.2vw;
    color: $accent;
    transition: all .35s ease;
  }
  &:hover {
    background: linear-gradient(135deg,  #ff2247, #1e3f9f);
    border-color: white;
    & .fa {
      color: white;
      transform: scale(1.1);
    }
  }
}