Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to make border popup animation for buttons using CSS ?

  • Last Updated : 08 Oct, 2021

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-element 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Example:

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 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 transition 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);
}

Output:

          




My Personal Notes arrow_drop_up
Recommended Articles
Page :