.
.. Demo:
Code (No link)
<style>
.shine-text-container {
padding: 16px 32px;
background: rgb(34, 0, 0);
border-radius: 10px;
display: inline-block;
}
.shine-text-container .shine-text {
font-size: 40px;
font-family: "Roboto", sans-serif;
text-transform: uppercase;
font-weight: 900;
padding: 0 48px;
line-height: 1;
background: linear-gradient(
to right,
rgb(255 44 44) 0%,
rgb(255 251 20) 16%,
rgb(255 44 44) 32%
);
-webkit-background-clip: text;
color: transparent;
background-position: -40px;
}
.shine-text-container:hover .shine-text {
animation: shineText 2000ms infinite;
}
@keyframes shineText {
to {
background-position: 240px;
}
}
</style>
<div class="shine-text-container">
<div class="shine-text">Hover Me</div>
</div></div>
Code with link
<style>
.shine-text-container {
padding: 16px 32px;
background: rgb(34, 0, 0);
border-radius: 10px;
display: inline-block;
}
.shine-text-container .shine-text {
font-size: 40px;
font-family: "Roboto", sans-serif;
text-transform: uppercase;
font-weight: 900;
padding: 0 48px;
line-height: 1;
background: linear-gradient(
to right,
rgb(255 44 44) 0%,
rgb(255 251 20) 16%,
rgb(255 44 44) 32%
);
-webkit-background-clip: text;
color: transparent;
background-position: -40px;
}
.shine-text-container:hover .shine-text {
animation: shineText 2000ms infinite;
}
@keyframes shineText {
to {
background-position: 240px;
}
}
</style>
<a class="shine-text-container" href="https://organisednotes.blogspot.com">
<div class="shine-text">Hover Me(clickable Link)</div>
</a>
