Link Hover Arrow Idea

index.html

<p ontouchstart="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tamen <a href="#">intellego</a> quid velit. Quod quidem iam fit etiam in Academia. Si enim ad populum me vocas, eum. Contineo me ab exemplis. Non potes, <a href="#">nisi retexueris</a> illa. Tu vero, inquam, ducas licet, si sequetur; Quorum altera prosunt, nocent altera. Duo Reges: constructio interrete. Certe non potest.</p>

link-hover-arrow-idea.markdown

Link Hover Arrow Idea

A Pen by Gabrielle Wee ✨ on CodePen.

License.

style.scss

*, *:before, *:after {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
*:focus { outline: none!important; }

body, html {
	height: 100%;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f1f1;
	color: #343434;
	font-family: "brandon-grotesque", "Brandon Grotesque";
	font-size: 24px;
}

p {
	padding: 12px;
	width: 100%;
	max-width: 600px;
	line-height: 1.4;
}

a {
	display: inline-block;
	position: relative;
	color: #343434;
	text-decoration: none;
	padding: 0 6px;
	&:before, &:after {
		will-change: transform;
		content: "";
		display: block;
		position: absolute;
		z-index: -1;
	}
	&:before {
		transition: 100ms ease-out 50ms;
		transform-origin: 0 24px;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: mix(#f1f1f1, #0077ff, 80%);
	}
	&:after {
		transition: 50ms ease-out;
		transform: scaleX(0);
		transform-origin: left center;
		bottom: 2px;
		right: -12px;
		border: 8px solid transparent;
		border-left-color: mix(#f1f1f1, #0077ff, 60%);
	}
	&:hover {
		&:before {
			transition: 100ms ease-out;
			transform: scaleY(.18);
			background: mix(#f1f1f1, #0077ff, 60%);
		}
		&:after {
			transition: 50ms ease-out 100ms;
			transform: none;
		}
	}
	&:active {
		&:before {
			transition: 100ms ease-in;
			background: mix(#f1f1f1, #0077ff, 40%);
		}
		&:after {
			transition: 100ms ease-in;
			border-left-color: mix(#f1f1f1, #0077ff, 40%);
		}
	}
}