- var label = 'cryptaris';
a.glitch-btn(href='http://cryptarismission.com' target='_blank')
  
  .label= label
  
  for i in [1, 2, 3, 4, 5]
    .mask
      span= label
View Compiled
@import 'bourbon';

@mixin jitter($steps:10, $strX:10, $strY:10){
   @keyframes jitter-#{$steps}-#{$strX}-#{$strY} {
    $i: $steps;
    @while $i > 0 {
      #{$i/$steps*100}% {
        $effectFalloff: 1-$i/$steps;
        $x: (random($strX) - $strX/2) * $effectFalloff + px;
        $y: (random($strY) - $strY/2) * $effectFalloff + px;
        transform: translate($x, $y);
      }
      $i: $i - 1;
    }
  }
}
@include jitter(20, 20, 8);
@include jitter(20, 21, 8);
@include jitter(20, 22, 8);
@include jitter(20, 23, 8);
@include jitter(20, 24, 8);

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  background-color: #111;
}

a {
  text-decoration: none;
  color: white;
}

.glitch-btn {
  user-select: none;
  cursor: pointer;
	display: inline-block;
	position: absolute;
  top: 50%; left: 50%;
  @include transform(translate(-50%, -50%));
	font-size: 36px;
	letter-spacing: .1em;
  line-height: 1.4;
	text-transform: uppercase;
	z-index: 1;

	$hoverDur: .8s;
	@include transition(all $hoverDur $ease-out-quint);
	&:hover {
		color: black;
		&:before {
			background: white;
			@include transform(translateY(-50%) scaleY(1.5));
		}
	}

	&:before {
		content: '';
		position: absolute;
		top: 50%; left: -18px;
		background: rgba(white, .1);
		width: 100%; height: 80%;
		padding: 0 15px;
		z-index: -1;

		@include transition(all $hoverDur $ease-out-quint);
	}

	// to prevent jank when :before div slides away from pointer
	&:after {
		content: '';
		position: absolute;
		top: 50%; left: -18px;
		background: rgba(black, 0);
		width: 100%; height: 100%;
		padding: 0 15px;
	}

	// glitch effect
	//
	.mask {
		position: absolute;  
    -webkit-backface-visibility: hidden;

		height: 20%; width: 100%;
		overflow: hidden;
		display: none;
		span {
			position: absolute;
			left: 50%;
			@include transform(translateX(-50%));
			width: 100%;
		}
	}

	$i: 6;
	$steps: $i;
	@while $i > 1 {
		.mask:nth-child(#{$i}) {
			top: ($i - 1) * 20%;
			span {
				top: -($i - 1) * 100%;
			}
		}
		$i: $i - 1;
	}

	&:hover {
		.label {
			@include animation(fade-in .8s both);
		}
		.mask {
			display: block;
		}

		$j: 6;
		$steps: $j;
		@while $j > 1 {
			.mask:nth-child(#{$j}) {
				@include animation(jitter-20-#{19+$j}-8 .3s both);
			}
			$j: $j - 1;
		}

	}

}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.