<!-- CODE = #A097 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NETBYZZ A097</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="button" data-text="Awesome">
<span class="actual-text"> Hover </span>
<span aria-hidden="true" class="hover-text"> Hover </span>
</button>
</body>
</html>
body {
background-color: #212121;
}
.button {
margin-left: 45%;
margin-top: 20%;
height: auto;
background: transparent;
padding: 0;
border: none;
cursor: pointer;
}
/* button styling */
.button {
--border-right: 6px;
--text-stroke-color: rgba(255, 255, 255, 0.6);
--animation-color: #37ff8b;
--fs-size: 2em;
letter-spacing: 3px;
text-decoration: none;
font-size: var(--fs-size);
font-family: "Arial";
position: relative;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px var(--text-stroke-color);
}
/* this is the text, when you hover on button */
.hover-text {
position: absolute;
box-sizing: border-box;
content: attr(data-text);
color: var(--animation-color);
width: 0%;
inset: 0;
border-right: var(--border-right) solid var(--animation-color);
overflow: hidden;
transition: 0.5s;
-webkit-text-stroke: 1px var(--animation-color);
}
/* hover */
.button:hover .hover-text {
width: 100%;
filter: drop-shadow(0 0 23px var(--animation-color));
}