Animated data-driven button

Animated data-driven button.markdown

Animated data-driven button

I needed to make a button that resizes based on data driven values. The animation uses two absolutely positioned spans that emulate a scrolling effect. The base text is transparent and is what actually resizes the width of the element.

If you can find a better solution please fork, fix and comment.

A Pen by Arthur Longbottom on CodePen.

License.

index.html

<a href="#" class="button">
    <div class="btn-state-wrapper">
      <span class="btn-state-0">button
        <span class="btn-state-1">button</span>
        <span class="btn-state-2">button</span>
      </span>
    </div>
  </a>

style.css

.button {
  display: inline-block;
  font-family: Arial;
  .btn-state {
    &-wrapper {
      display: inline-block;
      padding: 14px 30px;
      background-color: red;
      border-radius: 3px;
      text-transform: uppercase;
      transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
      line-height: 1;
    }
    &-0 {
      position: relative;
      z-index: 1;
      color: transparent;
    }
    &-1 {
      position: absolute;
      top: 0px;
      left: 0;
      color: black;
      transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
      opacity: 1;
    }
    &-2 {
      position: absolute;
      top: -15px;
      left: 0;
      color: white;
      transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
      opacity: 0;
    }
  }
  &:hover {
      .btn-state-wrapper {
        background-color: black;
        transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
      }
      .btn-state-1 {
        top: 15px;
        transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
        opacity: 0;
      }
      .btn-state-2 {
        top: 0;
        transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
        opacity: 1;
      }
    }
}