<a href="https://dribbble.com/shots/6552306-Characters-text-button" class="btn" id="text" target="_blank">CONTINUE</a>
.btn
  position: relative
  padding: 14px 42px
  color: white
  font-weight: bold
  font-size: 14px
  text-decoration: none
  background: #4a144b
  border-radius: 40px
  box-shadow: 0 8px 20px -6px rgba(#4a144b,.25)
  transition: all .2s linear
  letter-spacing: .1em
  &:hover
    background: darken(#4a144b,10%)
  &:active
    transform: translateY(1px)
  
body
  font-family: 'Roboto Mono', monospace
  -webkit-font-smoothing: antialiased
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
const FPS = 10;
const DURATION = 600;
const CHARACTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const TEXT = 'CONTINUE';
const DELAY = ~~(600 / FPS);
const FRAME_COUNT = ~~(DURATION / 600) * FPS

const $Element = document.getElementById('text');
let frameIndex = 0;
let timeoutId = undefined;

function resetText() {
  if (timeoutId !== undefined) clearTimeout(timeoutId);
  frameIndex = 0;
  $Element.innerText = TEXT;
}

function setRandomText() {
  const text = Array.from({length: TEXT.length}).map(() => CHARACTERS[~~(Math.random() * CHARACTERS.length)]);
  $Element.innerText = text.join('');
}

function animate() {
  if (frameIndex >= FRAME_COUNT) {
    resetText();
  } else {
    frameIndex += 1;
    setRandomText();
    timeoutId = setTimeout(animate, DELAY);
  }
}

$Element.addEventListener('mouseenter', animate);
$Element.addEventListener('mouseout', resetText);

resetText();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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