How to make border popup animation for buttons using CSS ?

Last Updated : 30 May, 2023

In this article, we will learn how to make border pop animation for buttons for your website. To create the border popup animation, we use CSS Pseudo Elements.

A CSS Pseudo elements is a keyword added to a selector that lets you style to a specific part of the selected element. In order to create an animation of such kind, we need to create our website to look decent so that clients can stay on the website.

Example: In this example, we will the border pop-ups when we click on the button.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge">
    <link rel="stylesheet"
          href="styles.css">
</head>
 
<body>
    <button class="btn btn-border-pop">
        Border Pop
    </button>
</body>
 
</html>

CSS code: We make the pseudo-element bigger and then we will give it a border and then we will multiply * it with (-2) so that it makes a border from inside so that it gives a nice outside-in transition.

The following is the code for “styles.css” used in the above HTML code. We use var for the background color and border size. We can use transitions on top, left, right, and bottom. We can calculate -2 border size so that we make it away from the box.

styles.css

CSS

*,
*::before,
*::after {
    box-sizing: border-box;
}
 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}
 
button {
    margin: 1rem;
}
 
.btn {
    background-color: var(--background-color);
    color: #222;
    padding: .5em 1em;
    border: none;
    outline: none;
    position: relative;
    cursor: pointer;
 
    --background-color: #E3E3E3;
    --border-size: 2px;
    --accent-color: #0AF;
}
 
.btn.btn-border-pop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border: var(--border-size) solid var(--background-color);
    transition: top, left, right, bottom, 100ms ease-in-out;
}
 
.btn.btn-border-pop:hover::before,
.btn.btn-border-pop:focus::before {
    top: calc(var(--border-size) * -2);
    left: calc(var(--border-size) * -2);
    right: calc(var(--border-size) * -2);
    bottom: calc(var(--border-size) * -2);
}