Animated arrow to toggle button.

button.html

<button class="foo">Test</button>

styles-generated.css

.foo {
  background-color: transparent;
  border: 0;
  color: transparent;
  cursor: pointer;
  height: 3em;
  overflow: hidden;
  outline: 0;
  position: relative;
  text-indent: 100%;
  width: 3em;
}
.foo:focus {
  outline: 0;
}
.foo::before, .foo::after {
  -webkit-transform-origin: 0;
  -moz-transform-origin: 0;
  -ms-transform-origin: 0;
  -o-transform-origin: 0;
  transform-origin: 0;
  -webkit-transition: all 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985) 0;
  -moz-transition: all 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985) 0;
  -ms-transition: all 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985) 0;
  -o-transition: all 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985) 0;
  transition: all 300ms cubic-bezier(0.26, 0.86, 0.44, 0.985) 0;
  background-color: red;
  border-radius: 2px;
  content: '';
  display: block;
  height: .15em;
  position: absolute;
  top: 42%;
  width: 0.94em;
}
.foo::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -0.5em;
  left: .82em;
}
.foo::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  margin: -0.5em 0 0 0.5em;
  left: calc(50% + .1em);
}
.foo.is--open::before {
  width: 1.8em;
}
.foo.is--open::after {
  width: 1.78em;
}

styles.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@mixin vendor_prefix($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}
@mixin custom_transition($property: all, $timing: 300ms, $delay: 0) {
  // scss-lint:disable NameFormat
  @include vendor_prefix(
    transition,
    $property $timing cubic-bezier(.26, .86, .44, .985) $delay
  );
  // scss-lint:enable NameFormat
}

@mixin button__nav_toggle(
  $color: $color_secondary
) {

  $toggle_nav_length: 1em;
  $toggle_nav_open_length: $toggle_nav_length * 1.8;

  background-color: transparent;
  border: 0;
  color: transparent;
  cursor: pointer;
  height: 3em;
  overflow: hidden;
  outline: 0;
  position: relative;
  text-indent: 100%;
  width: 3em;

  &:focus {
    outline: 0;
  }
  // End base styles

  &::before,
  &::after {
    @include vendor_prefix(
      transform-origin,
      0
    );
    @include custom_transition();
    background-color: $color;
    border-radius: 2px;
    content: '';
    display: block;
    height: .15em;
    position: absolute;
    top: 42%;
    width: $toggle_nav_length - .06em;
  }

  &::before {
    @include vendor_prefix(
      transform,
      rotate(45deg)
    );
    margin-top: -($toggle_nav_length / 2);
    left: .82em;
  }

  &::after {
    @include vendor_prefix(
      transform,
      rotate(135deg)
    );
    margin: -($toggle_nav_length / 2) 0 0 ($toggle_nav_length / 2);
    left: calc(50% + .1em);
  }

  &.is--open {
    &::before {
      width: $toggle_nav_open_length;
    }

    &::after {
      width: $toggle_nav_open_length - .02;
    }
  }
}




.foo {
  @include button__nav-toggle(red);
}