Box Link Hover Effect

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

Demo Download

AuthorTigran Sargsyan
CreatedSEPTEMBER 15, 2018
LicenseOpen
Compatible browsersChrome, 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

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *