Hotodogo | Snippets: Hover Effect 009

*, *::before, *::after {
	outline: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	background: white;
	height: 100vh;
	width: 100vw;
	font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT, monospace, cursive, serif, sans-serif;
	font-size: 20px;
	font-weight: normal;
	color: black;
	line-height: 1.2;
}

CSS Before Head

HTML Head

.hover-4 {
    --c: #1095c1;
    line-height: 1.2em;
    background:
        conic-gradient(from -135deg at 100% 50%, var(--c) 90deg, #0000 0) 0 var(--p, 0%)/var(--s, 0%) 200% no-repeat,
        conic-gradient(from -135deg at 1.2em 50%, #0000 90deg, var(--c) 0) 100% var(--p, 0%)/var(--s, 0%) 200% no-repeat;
    transition: .4s ease-in, background-position 0s;
}

.hover-4:hover {
    --p: 100%;
    --s: calc(50% + .61em);
}

body {
    height: 100vh;
    margin: 0;
    display: grid;
    gap: 20px;
    place-content: center;
}

h3 {
    font-family: system-ui, sans-serif;
    font-size: 3rem;
    margin: 0;
    cursor: pointer;
    padding: 0 .07em;
}

CSS After Head

JS Before HTML Body

<h3 class="hover-4">Hover Me</h3>

HTML Body

HTML Foot

JS After HTML Body