<h3 class="hover">Hover Me</h3>
.hover {
--c: #1095c1; /* the color */
color: #0000;
background:
linear-gradient(90deg,#fff 50%,var(--c) 0) calc(100% - var(--_p,0%))/200% 100%,
linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) 100% no-repeat;
-webkit-background-clip: text,padding-box;
background-clip: text,padding-box;
transition: 0.5s;
}
.hover:hover {
--_p: 100%
}
body {
height: 100vh;
margin: 0;
display: grid;
place-content: center;
}
h3 {
font-family: system-ui, sans-serif;
font-size: 3rem;
margin:0;
cursor: pointer;
padding: 0 .1em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.