Hello Friends, in this article I have listed 25+ Awesome CSS Border Animation Examples. Check out these excellent Border Hover Effect which are available on CodePen.
How To Create border bottom animation using css
Step 1 — Creating a New Project
In this step, we need to create a new project folder and files(index.html, style.css) for creating a Simple Border Hover Effect. In the next step, you will start creating the structure of the webpage.
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> border bottom animation using css</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
</body>
</html>
This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:
<div class="container">
<a class="anim-link" href="#">Stackfindover</a>
</div>
Step 3 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
.container {
width: 90%;
max-width: 1160px;
margin: auto;
}
.anim-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.anim-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.anim-link:hover::after {
width: 100%;
}
#Final Result
Check all CSS border effect examples
Top comments (0)