<!-- Thanks to David Connor https://codepen.io/davidicus/ for Inspiration. -->

<div class="container">
	<p class="animated-word">BEZY</p>
</div>

html, body {
	height: 100%;
}
body {
	margin: 0;
	background: linear-gradient(#f2f2f6, #d3d3e7);
}

.container {
	height: 100%;
	display: flex;
	align-items: center;
  justify-content: center;
}
.animated-word {
	font-family: Helvetica;
	letter-spacing: 0.4em;
	font-weight: 600;
	font-size: 100px;
	text-align: center;
	color: #202125;
  cursor: pointer;
  max-width: 600px; 
  width: 100%; 
  outline: 3px solid;
  outline-color: rgba(71, 126, 232,0.5);
  outline-offset: 70px;
  transition: all 600ms cubic-bezier(0.2, 0, 0, 0.8);
}

.animated-word:hover {
	color: rgba(71, 126, 232, 0.7);
  outline-color: rgba(71, 126, 232, 0);
  outline-offset: 300px;
}