You must have plenty of On Hover effects of CSS multiple times around the websites you visit, be it on heading, buttons or whatever the author of that website wants. You want to add something like that your project too and does not want tough and complex code too? Isn’t that a bit tough? Don’t worry tho my mate, here do we present our simple CSS Border Animation effect made with the help of simple HTML and CSS. In this effect whenever the user hovers over the desired block of Word or letter or a button, a border starts from the top, comes down from both side, after the border gets completed, the text inside the border gets a shadow to make it more highlighted and easy to emphasize. The animation here is super nice, so you won’t need any more complicated stuff to add inside the already built code.

You can easily configure CSS Border Animation to your needs, change the speed, colors, box shadow or whatever you want. Let’s see the preview.

If you like how this affects after finishing works, let’s continue to dive deep down.

You might also like.

How CSS Border Animation works.

CSS Border Animation

First of all, before sharing the code, let’s talk about how we managed to create this beautiful effect through just CSS and HTML. Create a div with the class name of the container, this container div is gonna act like our parent div, inside this div, I added a A TAG famously known as hyperlink tag with the class name of border-animation. And after adding the text we close the div. Yes, the only part that HTML needs to work is this. Now when it comes to style.css StyleSheet, we changed the font size, added a border, few @keyframes for animation. You can read more about keyframes in MDN.

Source Code.

Here’s the code for our Index.HTML.

!DOCTYPE HTML
<HTML>

<HEAD>
	<TITLE>Evil Web Dev | CSS Border Animation.</TITLE>
	<link rel="stylesheet" href="style.css">
</HEAD>

<BODY>
	<div class="container">
		<a class="border-animation" href="#">
			<div class="border-animation__inner">Border animation</div>
		</a>
	</div>
</BODY>

</HTML>

and code for our style.css file.

@import url(https://fonts.googleapis.com/css?family=Six+Caps);
 html * {
	box-sizing: border-box;
}
body {
	font-size: 16px;
	padding: 10px;
	background: #333333;
	color: #ffffff;
	text-align: center;
	height: 100vh;
	margin: 0;
	display: flex;
	align-items: center;
	height: 100vh;
}
.container {
	width: 100%;
}
.border-animation {
	--border-width: 0.1em;
	--animation-speed: 0.5s;
	--color: #ffffff;
	color: var(--color);
	position: relative;
	display: inline-block;
	font-size: 4em;
	line-height: 1em;
	-webkit-transform: scale(1, 0.8);
	transform: scale(1, 0.8);
	border: var(--border-width) solid transparent;
}
.border-animation .border-animation__inner {
	position: relative;
	display: inline-block;
	width: 100%;
	font-family: 'Six Caps', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	padding: 0.2em;
	background: #333;
	z-index: 1;
	border: solid var(--border-width) transparent;
}
.border-animation:before,
.border-animation:after {
	content: '';
	position: absolute;
	background: var(--color);
}
.border-animation:focus:before,
.border-animation:hover:before {
	-webkit-animation: beforeBorders var(--animation-speed) forwards ease-in-out;
	animation: beforeBorders var(--animation-speed) forwards ease-in-out;
}
.border-animation:focus:after,
.border-animation:hover:after {
	-webkit-animation: afterBorders var(--animation-speed) forwards ease-in-out;
	animation: afterBorders var(--animation-speed) forwards ease-in-out;
}
.border-animation:focus,
.border-animation:hover {
	-webkit-animation: borderColors var(--animation-speed) steps(1) forwards;
	animation: borderColors var(--animation-speed) steps(1) forwards;
	outline: none;
}
.border-animation:focus .border-animation__inner,
.border-animation:hover .border-animation__inner {
	-webkit-animation: background calc(var(--animation-speed) / 5 * 3) forwards ease-in-out;
	animation: background calc(var(--animation-speed) / 5 * 3) forwards ease-in-out;
	-webkit-animation-delay: calc(var(--animation-speed) / 5 * 2);
	animation-delay: calc(var(--animation-speed) / 5 * 2);
}
@-webkit-keyframes beforeBorders {
	0% {
		top: calc(var(--border-width) * -1);
		left: 50%;
		bottom: auto;
		right: auto;
		width: 0;
		height: var(--border-width);
	}
	33% {
		top: calc(var(--border-width) * -1);
		left: calc(var(--border-width) * -1);
		bottom: auto;
		right: auto;
		width: calc(var(--border-width) + 50%);
		height: var(--border-width);
	}
	66% {
		top: calc(var(--border-width) * -1);
		left: calc(var(--border-width) * -1);
		bottom: auto;
		right: auto;
		width: var(--border-width);
		height: calc((var(--border-width) * 2) + 100%);
	}
	100% {
		top: auto;
		left: calc(var(--border-width) * -1);
		bottom: calc(var(--border-width) * -1);
		right: auto;
		width: calc(var(--border-width) + 50%);
		height: calc((var(--border-width) * 2) + 100%);
	}
}
@keyframes beforeBorders {
	0% {
		top: calc(var(--border-width) * -1);
		left: 50%;
		bottom: auto;
		right: auto;
		width: 0;
		height: var(--border-width);
	}
	33% {
		top: calc(var(--border-width) * -1);
		left: calc(var(--border-width) * -1);
		bottom: auto;
		right: auto;
		width: calc(var(--border-width) + 50%);
		height: var(--border-width);
	}
	66% {
		top: calc(var(--border-width) * -1);
		left: calc(var(--border-width) * -1);
		bottom: auto;
		right: auto;
		width: var(--border-width);
		height: calc((var(--border-width) * 2) + 100%);
	}
	100% {
		top: auto;
		left: calc(var(--border-width) * -1);
		bottom: calc(var(--border-width) * -1);
		right: auto;
		width: calc(var(--border-width) + 50%);
		height: calc((var(--border-width) * 2) + 100%);
	}
}
@-webkit-keyframes afterBorders {
	0% {
		top: calc(var(--border-width) * -1);
		left: auto;
		bottom: auto;
		right: 50%;
		width: 0;
		height: var(--border-width);
	}
	33% {
		top: calc(var(--border-width) * -1);
		left: auto;
		bottom: auto;
		right: calc(var(--border-width) * -1);
		width: calc(var(--border-width) + 50%);
		height: var(--border-width);
	}
	66% {
		top: calc(var(--border-width) * -1);
		left: auto;
		bottom: auto;
		right: calc(var(--border-width) * -1);
		width: var(--border-width);
		height: calc((var(--border-width) * 2) + 100%);
	}
	100% {
		top: auto;
		left: auto;
		bottom: calc(var(--border-width) * -1);
		right: calc(var(--border-width) * -1);
		width: calc(var(--border-width) + 50%);
		height: calc((var(--border-width) * 2) + 100%);
	}
}
@keyframes afterBorders {
	0% {
		top: calc(var(--border-width) * -1);
		left: auto;
		bottom: auto;
		right: 50%;
		width: 0;
		height: var(--border-width);
	}
	33% {
		top: calc(var(--border-width) * -1);
		left: auto;
		bottom: auto;
		right: calc(var(--border-width) * -1);
		width: calc(var(--border-width) + 50%);
		height: var(--border-width);
	}
	66% {
		top: calc(var(--border-width) * -1);
		left: auto;
		bottom: auto;
		right: calc(var(--border-width) * -1);
		width: var(--border-width);
		height: calc((var(--border-width) * 2) + 100%);
	}
	100% {
		top: auto;
		left: auto;
		bottom: calc(var(--border-width) * -1);
		right: calc(var(--border-width) * -1);
		width: calc(var(--border-width) + 50%);
		height: calc((var(--border-width) * 2) + 100%);
	}
}
@-webkit-keyframes borderColors {
	0% {
		border-top-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	33% {
		border-top-color: var(--color);
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	66% {
		border-top-color: var(--color);
		border-right-color: var(--color);
		border-bottom-color: transparent;
		border-left-color: var(--color);
	}
	100% {
		border-top-color: var(--color);
		border-right-color: var(--color);
		border-bottom-color: var(--color);
		border-left-color: var(--color);
	}
}
@keyframes borderColors {
	0% {
		border-top-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	33% {
		border-top-color: var(--color);
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	66% {
		border-top-color: var(--color);
		border-right-color: var(--color);
		border-bottom-color: transparent;
		border-left-color: var(--color);
	}
	100% {
		border-top-color: var(--color);
		border-right-color: var(--color);
		border-bottom-color: var(--color);
		border-left-color: var(--color);
	}
}
@-webkit-keyframes background {
	to {
		background: #555;
		text-shadow: 0 0.1em 0.1em #111;
	}
}
@keyframes background {
	to {
		background: #555;
		text-shadow: 0 0.1em 0.1em #111;
	}
}
@media (min-width: 850px) {
	body {
		justify-content: center;
	}
}
@media (min-width: 1200px) {
	.border-animation {
		font-size: 6em;
		line-height: 1em;
	}
}

So this is how we create our CSS Border Animation.

CodePen.

See the Pen CSS-only border animation by Kamran Tahir (@Mah3svara) on CodePen.

unsplash-logoLuca Bravo

0 CommentsClose Comments

Leave a comment