<div class="container">
  <a href="#" class="distort">DISTORT</a>
</div>
a {
  text-decoration: none; 
}

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.distort {
  font-family: 'Source Code Pro', monospace;
  color: #222;
  font-size: 3em;
}
//ONLOAD
$(function(){
  //DECLARE GLOBAL VARIABLE FOR USE IN HANDLERS
  var orig, sib;
  var runs = 0;
  var charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890+>?-$#@%&*';
  
  //RUN JS WHEN 'DISTORT' IS HOVERED
  $('.distort').hover(function(){
      var curr = $(this);
      orig = $(this).text();
      sib = setInterval(function(){
        distortText(curr);
      }, 100);
  }, function(){
    //RESET THE ORIGINAL TEXT
    clearInterval(sib);
    $(this).text(orig);
  });
 
  function distortText(i){
    //MAINTAINS SOME READABILITY IN THE TEXT BY ONLY ALLOWING 3 CHARACTERS TO BE DISTORTED
    if (runs >= 2){
      runs = 0;
      i.text(orig);
      return;
    }
    //GET EACH INDIVIDUAL CHARACTER
    var chars = i.text().split('');
    //GET A RANDOM CHARACTER FROM THE TEXT
    var rand = Math.floor(Math.random() * (chars.length));
    //GET A RANDOM REPLACEMENT CHARACTER
    var randRep = Math.floor(Math.random() * (charSet.length));
    //CHECK TO MAKE SURE THAT THE NEW CHARACTER IS DIFFERENT FROM THE OLD
    if(chars[rand] != charSet[randRep] && chars[rand] != ' '){
      chars[rand] = charSet[randRep];
    } else {
      distortText(i);
    }
    //UPDATE TEXT
    i.text(chars.join(''));
    runs += 1;
  }
});
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Source+Code+Pro

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js