<h2>My play / pause button</h2>
<button class="o-play-btn">
  <i class="o-play-btn__icon">
    <div class="o-play-btn__mask"></div>
  </i>
</button>

$backgroundColor: #333;

.o-play-btn {
    position: relative;
    background: transparent;
    border: none;
    outline: none;

    &__icon {
        $size: 30px;
        height: $size;
        width: $size;
        line-height: $size;
        position: relative;
        z-index: 0;
        box-sizing: border-box;
        display: inline-block;
        overflow: hidden;

        &:before, &:after {
            content: '';
            position: absolute;
            transition: 0.3s;
            background: #FFF;
            height: 100%;
            width: 50%;
            top: 0;
        }

        &:before {
            left: 0;
        }

        &:after {
            right: 0;
        }
    }

    &__mask {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;

        &:before, &:after {
            content: '';
            position: absolute;
            left: 0;
            height: 100%;
            width: 150%;
            background: $backgroundColor;
            transition: all 0.3s ease-out;
        }

        &:before {
            top: -100%;
            transform-origin: 0% 100%;
            transform: rotate(26.5deg);
        }

        &:after {
            transform-origin: 0% 0%;
            transform: rotate(-26.5deg);
            top: 100%;
        }
    }

    &--playing {

        .o-play-btn {

            &__icon {

                &:before {
                    transform: translateX(-25%);
                }

                &:after {
                    transform: translateX(25%);
                }
            }

            &__mask {

                &:before, &:after {
                    transform: rotate(0);
                }
            }
        }
    }
}

body {
  color: #fff;
  font-family: arial, sans-sarif;
  background-color: $backgroundColor;
  text-align: center;
}

$('.o-play-btn').on('click', function () {
  $(this).toggleClass('o-play-btn--playing');
});