Horje
How to make border popup animation for buttons using CSS ?

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

Output:

          


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
How to make Google search bar like input box highlight on hover using CSS ? How to make Google search bar like input box highlight on hover using CSS ?
How to create Shooting Star Animation Effect using CSS ? How to create Shooting Star Animation Effect using CSS ?
What are the important features of Pure.CSS ? What are the important features of Pure.CSS ?
How to create Candle Animation using CSS ? How to create Candle Animation using CSS ?
SASS @for Rule SASS @for Rule

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 9



 

Horje