DEV Community

Cover image for 25+ Best CSS Border Effect Examples
Stackfindover
Stackfindover

Posted on

25+ Best CSS Border Effect Examples

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

#Final Result

border bottom animation gif

Check all CSS border effect examples

Discussion (0)