Cacher is the code snippet organizer for pro developers

<button id="js-scroll-btn" class="scroll-btn" type="button">
  <span class="scroll-btn__txt">SCROLL</span>
</button>

@import url(//fonts.googleapis.com/css?family=Open+Sans&display=swap);

$gothic: 'Open Sans', '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
 
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
html {
  font-size: 62.5%;
  line-height: 1.15;
}
 
body {
  background: #333;
  color: #fafafa;
  font: normal normal normal 1.5em/1.7 $gothic;
}
 
button {
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: none;
}

.scroll-btn {
  padding-bottom: 125px;

  &,
  &::after {
    bottom: 0;
    display: inline-block;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
  }

  &::after {
    animation: scroll-sign 1.8s cubic-bezier(.645, .045, .355, 1) infinite both;
    background: rgba(#fff, .9);
    content: '';
    height: 80px;
    width: 1px;
  }

  &__txt {
    display: inline-block;
    letter-spacing: .4em;
    transform: rotate(90deg);
  }
}

@keyframes scroll-sign {
  0% {
    transform: scale3d(1, 1, 1);
    transform-origin: left bottom;
  }

  50% {
    transform: scale3d(1, 0, 1);
    transform-origin: left bottom;
  }

  51% {
    transform: scale3d(1, 0, 1);
    transform-origin: left top;
  }

  100% {
    transform: scale3d(1, 1, 1);
    transform-origin: left top;
  }
}