Animated Stacked Button

In this article, we will be developing a button with animation as shown in the demo GIF.

The HTML Code for Buttons

Let's start of with a default index.html file which can be created with typing in "!" and pressing enter in VS Code.

In this example I have implemented the button animation in a navbar containing 3 buttons. We can start of by adding a container class to house our elements. Then I added a navbar class div under which 3 buttons are placed. I also attached class btn for all the buttons.

Our HTML should now look like below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="styles/styles.css" type="text/css">
</head>
<body>
    <div class="container">
        <div class="navbar">
            <button class="btn">About Me</button>
            <button class="btn">Skills</button>
            <button class="btn">Get In Touch</button>
        </div>
    </div>
</body>
</html>

Now that our HTML is set up lets move on to styling the buttons.

Styling the Buttons with SCSS

In the styles.scss file I added basic styling.

Next for implementing our specific styling, we will be working on the ::after pseudo-element of the .btn class.

We should always add content: "" in the ::after
for the after pseudo-element to be displayed. Then we should set the
height and width of the pseudo-element. I would suggest to set a height
value under 1em and width to be about 75%. I have set the default height
and width like that because we will be scaling the pseudo-element for
animation.

Now set the position of ::after to be absolute and set left: 0 and top: 50%, this is to position the element in the lower-left corner. Also add z-index: -1 to position the pseudo-element under the button text.

Next it is time to add the transition. Add transition as transition: transform 175ms cubic-bezier(0.91, 0, 0.55, 1.64)
what this means is that our transform will occur in a period of 175ms
rather than just jumping into a bigger size. This will give the button a
smooth animation. We can also set the transform-origin to bottom left so that our scaling begins from bottom left which gives a better effect than growing from the middle.

Now we should add the code to make the button animate on hover or focus. For that, we should be adding transform: scale(1.35, 1.85) on the ::after pseudo-element of the :hover and :focus of .btn class, just as below,

.btn:hover::after, .btn:focus::after { transform: scale(1.35, 1.85); }

So that the final styling code would be similar to the code as below,

body {
    height: 100vh;
    margin: 0;
    background-color: #1c1c1c;

    .container {
        width: 100%;
        height: 100%;

        .navbar {
            position: fixed;
            z-index: 1;
            bottom: 100px;

            .btn {
                cursor: pointer;
                border: 0;
                display: block;
                background: transparent;
                color: #f1f1f1;
                font-size: 1.125rem;
                padding: 2em;
                position: relative;
                align-self: start;
                justify-self: start;
                z-index: 2;
            
                a {
                    text-decoration: none;
                    color: #f1f1f1;
                }
            }
            
            .btn::after {
                content: "";
                position: absolute;
                background: #3b55ce;
                height: 0.85em;
                width: 75%;
                left: 0;
                top: 50%;
                z-index: -1;
                transition: transform 175ms cubic-bezier(0.91, 0, 0.55, 1.64);
                transform-origin: bottom left;
            }
            
            .btn:hover::after,
            .btn:focus::after {
                transform: scale(1.35, 1.85);
            }
        }
    }
}

Animated Stacked Button

The HTML Code for Buttons

Styling the Buttons with SCSS

Rahul

Leave a comment