CSS Bear Toggle

css-bear-toggle.markdown

CSS Bear Toggle

A beary cute toggle.

A Pen by Anastasia Goodwin on CodePen.

License.

index.html

<div class="toggleWrapper">
  <input type="checkbox" class="dn" id="dn"/>
    <label for="dn" class="toggle">
    <span class="toggle__handler">
  </label>
  <div class="bear-body">
    <span class="eye left"></span>
    <span class="eye right"></span>
  </div>
</div>

style.scss

$brown: #7e2804;
$orange: #fe7702;
$darkBrown: #3d2526;
$yellow: #fdb300;
$tan: #dcc8a3;

body {
  background-color: #7994a5;
  font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold', 'Montserrat',
    sans-serif;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.toggleWrapper {
  padding: 20px;
  position: relative;

  input {
    position: absolute;
    left: -99em;
  }
}

.toggle {
  cursor: pointer;
  display: inline-block;
  position: absolute;
  width: 90px;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  height: 40px;
  background-color: $tan;
  border-radius: 90px - 6;
  z-index: 2;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.toggle__handler {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 40px - 6;
  height: 40px - 6;
  background-color: $brown;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

input:checked {
  + .toggle {

    &:after {
      color: #ffffff;
    }

    .toggle__handler {
      transform: translate3d(49px, 0, 0) rotate(0);
    }
    + .bear-body {
      transform: rotateY(180deg);
    }
  }
}

.bear-body {
  position: relative;
  border-radius: 20px 10px 5px;

  border-bottom: 150px solid $brown;
  border-left: 20px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
  width: 94px;

  &::before,
  &::after {
    content: '';
    position: absolute;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    top: -16px;
    background: radial-gradient($tan 5px, $brown 6px);
  }
  &::before {
    left: -12.5px;
  }
  &::after {
    right: -12.5px;
  }
  .eye {
    position: absolute;
    top: 18px;
    background: $darkBrown;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background-image: radial-gradient(circle at 4px, white 1px, $darkBrown 2px);

    &.left {
      left: 20px;
      animation: blink 3s ease-in-out infinite;
    }
    &.right {
      left: 46px;
      animation: blink 3.5s ease-in-out infinite;
    }
  }
}

@keyframes blink {
  85% {
    transform: rotateX(0deg);
  }
  90% {
    transform: rotateX(90deg);
  }
}