Vigowebs/hover-button-01.css

## hover-button-01.css
@import url("https://fonts.googleapis.com/css?family=Roboto:900");

body {
    background: #111;
}

a {
    font-family: "Roboto", "sans-serif";
    font-weight: 900;
    color: #000;
    text-decoration: none;
}

.centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% -50%);
}

.hover-button {
    background: #fff;
    padding: 20px;
    width: 250px;
    text-align: center;
}

.hover-button span {
    display: inline-block;
    min-width: 0.3em;
    transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
    opacity: 0;
    transform: translate(0, -20px);
}

.hover-button:before {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    left: 0;
    text-transform: uppercase;
    transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
    letter-spacing: 3.5px;
    opacity: 1;
    transform: translate(0, 0px);
}

.hover-button:hover:before, .hover-button:focus:before {
    opacity: 0;
    transform: translate(0, 20px);
}

.hover-button:hover span, .hover-button:focus span {
    opacity: 1;
    transform: translate(0, 0);
}

.hover-button:hover span:nth-child(1), .hover-button:focus span:nth-child(1) {
    transition-delay: 0.025s;
}

.hover-button:hover span:nth-child(2), .hover-button:focus span:nth-child(2) {
    transition-delay: 0.05s;
}

.hover-button:hover span:nth-child(3), .hover-button:focus span:nth-child(3) {
    transition-delay: 0.075s;
}

.hover-button:hover span:nth-child(4), .hover-button:focus span:nth-child(4) {
    transition-delay: 0.1s;
}

.hover-button:hover span:nth-child(5), .hover-button:focus span:nth-child(5) {
    transition-delay: 0.125s;
}

.hover-button:hover span:nth-child(6), .hover-button:focus span:nth-child(6) {
    transition-delay: 0.15s;
}

## hover-button-01.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover button 01</title>
    <link rel="stylesheet" href="./main.css"/>
</head>
<body>
    <a aria-label="Hover button" class="hover-button centered" data-text="Hover me" href="#">
        <span>T</span>
        <span>H</span>
        <span>A</span>
        <span>N</span>
        <span>K</span>
        <span>S</span>
    </a>
</body>
</html>
	@import url("https://fonts.googleapis.com/css?family=Roboto:900");

	body {
	background: #111;
	}

	a {
	font-family: "Roboto", "sans-serif";
	font-weight: 900;
	color: #000;
	text-decoration: none;
	}

	.centered {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% -50%);
	}

	.hover-button {
	background: #fff;
	padding: 20px;
	width: 250px;
	text-align: center;
	}

	.hover-button span {
	display: inline-block;
	min-width: 0.3em;
	transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
	opacity: 0;
	transform: translate(0, -20px);
	}

	.hover-button:before {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	left: 0;
	text-transform: uppercase;
	transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
	letter-spacing: 3.5px;
	opacity: 1;
	transform: translate(0, 0px);
	}

	.hover-button:hover:before, .hover-button:focus:before {
	opacity: 0;
	transform: translate(0, 20px);
	}

	.hover-button:hover span, .hover-button:focus span {
	opacity: 1;
	transform: translate(0, 0);
	}

	.hover-button:hover span:nth-child(1), .hover-button:focus span:nth-child(1) {
	transition-delay: 0.025s;
	}

	.hover-button:hover span:nth-child(2), .hover-button:focus span:nth-child(2) {
	transition-delay: 0.05s;
	}

	.hover-button:hover span:nth-child(3), .hover-button:focus span:nth-child(3) {
	transition-delay: 0.075s;
	}

	.hover-button:hover span:nth-child(4), .hover-button:focus span:nth-child(4) {
	transition-delay: 0.1s;
	}

	.hover-button:hover span:nth-child(5), .hover-button:focus span:nth-child(5) {
	transition-delay: 0.125s;
	}

	.hover-button:hover span:nth-child(6), .hover-button:focus span:nth-child(6) {
	transition-delay: 0.15s;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hover button 01</title>
	<link rel="stylesheet" href="./main.css"/>
	</head>
	<body>
	<a aria-label="Hover button" class="hover-button centered" data-text="Hover me" href="#">
	<span>T</span>
	<span>H</span>
	<span>A</span>
	<span>N</span>
	<span>K</span>
	<span>S</span>
	</a>
	</body>
	</html>