SCSS

by maya tominaga

HTML

<div>
  <div class="btn-content">
    <button class="blue-btn effect-fade-top">Button</button>  
  </div>
  <div class="btn-content">
    <button class="blue-btn effect-fade-side">Button</button>  
  </div>
  <div class="btn-content">
    <button class="blue-btn effect-shake">Button</button>  
  </div>
</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.btn-content {
  margin-bottom: 30px;
}

.blue-btn {
  background: $blue-darker;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.effect-fade-top {
  animation-name: fade-in-top;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes fade-in-top {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.effect-fade-side {
  animation-name: fade-in-side;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes fade-in-side {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.effect-shake {
  animation: shake 4s infinite, fade-shake 2s 1;
}

@keyframes shake {
  0% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(15deg);
  }
}

@keyframes fade-shake {
  from {
    opacity: 0;
    transform: translateY(-20px), rotate(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-15deg);
  }
}