Box Link Hover Effect

CSS Hover effect on Box links with animation developed using CSS, HTML. Demo and Download available.

Demo Download

Author Tigran Sargsyan
Hits
Created SEPTEMBER 15, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<a href="" class="card"><span class="card-text">W3 Tweaks!</span></a>

CSS code

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: 100vh;
	margin: 0;
	font-family: Helvetica, Arial, sans-serif;
}
a {
	color: hsl(210, 100%, 50%);
}

.card {
	font-weight: bold;
	display: inline-block;
	margin: 30px;
	padding: 1em 2em;
	position: relative;
	background: hsl(0, 0%, 90%);
	font-size: 3rem;
	text-decoration: none;
	text-transform: uppercase;
}
.card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: hsl(0, 80%, 60%);
	transform: scale(1, 0.1);
	transform-origin: bottom left;
	animation: link-hover-out .25s;
}

.card:hover::before {
	animation: link-hover .5s ease-in forwards;
}
.card-text {
	position: relative;
	color: hsl(160, 100%, 30%);
	transition: .25s;
}
.card:hover .card-text {
	transition-delay: .4s;
	color: hsl(0, 0%, 90%);
}



@keyframes link-hover {
	25% {
		transform: scale(0.05, 0.1);
	}
	50% {
		transform: scale(0.05, 1);
	}
	65% {
		transform: scale(0.1, 1);
	}
	100% {
		transform: scale(1, 1);
	}
}
@keyframes link-hover-out {
	from {
		transform: scale(1, 1);
	}
}

Preview

Box Link Hover Effect preview

Advertisement

Google Matched Content...