<div class="container">
  <p class="btn"><a href="＃" id="js-text">SparkText</a></p>
</div>

@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);
$font-family-qs: 'Quattrocento Sans', sans-serif;

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #111;
  overflow: hidden;
  .btn {
    position: absolute;
    top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
    width: 420px;
    height: 60px;
    line-height: 60px;
  	margin: auto;
    text-align: center;
		a {
      position: relative;
			display: block;
			font-size: 36px;
			color: #fff;
			font-family: $font-family-qs;
      text-transform: uppercase;
      text-decoration: none;
			transition: all .5s ease;
      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        margin: auto;
        background: #fff;
      }
      &:hover::after {
        width: 100%;
        transition: all 1.2s linear;
      }
			span {
				display: inline-block;
				margin: 0 10px;
        transition: all .5s 0s ease;
        visibility: visible;
        opacity: 1;
        &:nth-child(5) {
          margin-right: 20px;
        }
        &:nth-child(6) {
          margin-left: 20px;
        }
			}
			@for $i from 1 through 9 {
				&:hover span:nth-child(#{$i}) {
          transition: all 1s $i/10+s ease;
					transform:
            perspective(2000px)
            translateY(random(200)-100+px)
            translateX(random(200)-100+px)
            translateZ(random(200)-100+px)
            rotateX(random(720)+360+deg)
            rotateY(random(720)+360+deg);
          visibility: hidden;
					opacity: 0;
				}
			}
		}
  }
}

function textSplit(target) {
  target.children().andSelf().contents().each(function() {
    if (this.nodeType == 3) {
      $(this).replaceWith($(this).text().replace(/(\w)/g, "<span>$&</span>"));
	  }
  });
}

$(function () {
 textSplit($('#js-text'));
});