How to create a animated pill shaped button using HTML and CSS ?

Last Updated : 26 Jul, 2024

Most mobile applications and websites have some eye-catching animation that tries to grab the attention of the user, these animations trigger some event fire or on an infinite loop, website events are triggered on mouse clicks or mouse hovers while on mobile touch events or infinite loop is activated. Won't you be glad to learn how to make one of those animations? now in this demo, we will be learning to make a website Share button animation that animates on mouse hover.

A glimpse of the Main outcome:

Approach:

Make an HTML file.
Make a div with the choice of your name as a selector class, here we have used btn_wrap.
Make the outer overlay using a span tag, this will be the label of the pill.
Make a div with the class name of your choice to put the icons in.
Put the icons inside i element, you can put as many icons as you want, just don't forget to increase the width of the pill.
Style the span, i, and container selectors accordingly.
Animate the btn_wrap while on hover using the transform property.
Add the transition delay on each child icon for smooth revelation.

HTML: Here we will create a structure according to our approach and make it a wrap as a share button on multiple social media platforms.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- FontAwesome icon CDN Link -->
    <script src=
"https://kit.fontawesome.com/152767c355.js" 
            crossorigin="anonymous">
    </script>
    <title>Animated Pill Shaped Button</title>
</head>

<body>
    <!-- Button Wrapper -->
    <div class="btn_wrap">
        <span> Share </span>
        <div class="container">
            <!-- Individual Icon Buttons -->
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-whatsapp"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-twitter"></i>
        </div>
    </div>
</body>
</html>

CSS: Here we will style our structure that has been created by using HTML.

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #fefefe;
}

i {
    opacity: 0;
    font-size: 28px;
    color: #1f1e1e;
    transform: scale(0.1);
}

.btn_wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    width: 240px;
    height: 72px;
    background-color: #eeeeed;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    transition: all 0.2s ease-in-out;
}

.btn_wrap:hover {
    transform: scale(1.1);
}

span {
    position: absolute;
    z-index: 99;
    width: 240px;
    height: 72px;
    border-radius: 80px;
    font-family: sans-serif;
    font-size: 20px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 2px;
    color: #eeeeed;
    background-color: #1f1e1e;
    padding: 0 18px;
    transition: all 1.2s ease;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 240px;
    height: 64px;
    border-radius: 80px;
}

.container i:nth-of-type(1) {
    transition-delay: 1.1s;
}

.container i:nth-of-type(2) {
    transition-delay: 0.9s;
}

.container i:nth-of-type(3) {
    transition-delay: 0.7s;
}

.container i:nth-of-type(4) {
    transition-delay: 0.4s;
}

.btn_wrap:hover span {
    transition-delay: 0.25s;
    transform: translateX(-280px);
}

.btn_wrap:hover i {
    opacity: 1;
    transform: scale(1);
}

Complete Code: Here we will use the CSS in the HTML files' head section, so we can see the output online.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- FontAwesome icon CDN Link -->
    <script src=
"https://kit.fontawesome.com/152767c355.js" 
            crossorigin="anonymous">
    </script>
    <title>Animated Pill Shaped Button</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #fefefe;
        }

        i {
            opacity: 0;
            font-size: 28px;
            color: #1f1e1e;
            transform: scale(0.1);
        }

        .btn_wrap {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            cursor: pointer;
            width: 240px;
            height: 72px;
            background-color: #eeeeed;
            border-radius: 80px;
            padding: 0 18px;
            transition: all 0.2s ease-in-out;
        }

        .btn_wrap:hover {
            transform: scale(1.1);
        }

        span {
            position: absolute;
            z-index: 99;
            width: 240px;
            height: 72px;
            border-radius: 80px;
            font-family: sans-serif;
            font-size: 20px;
            text-align: center;
            line-height: 70px;
            letter-spacing: 2px;
            color: #eeeeed;
            background-color: #1f1e1e;
            padding: 0 18px;
            transition: all 1.2s ease;
        }

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 240px;
            height: 64px;
            border-radius: 80px;
        }

        .container i:nth-of-type(1) {
            transition-delay: 1.1s;
        }

        .container i:nth-of-type(2) {
            transition-delay: 0.9s;
        }

        .container i:nth-of-type(3) {
            transition-delay: 0.7s;
        }

        .container i:nth-of-type(4) {
            transition-delay: 0.4s;
        }

        .btn_wrap:hover span {
            transition-delay: 0.25s;
            transform: translateX(-280px);
        }

        .btn_wrap:hover i {
            opacity: 1;
            transform: scale(1);
        }
    </style>
</head>

<body>
    <!-- Button Wrapper -->
    <div class="btn_wrap">
        <span> Share </span>
        <div class="container">
            <!-- Individual Icon Buttons -->
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-whatsapp"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-twitter"></i>
        </div>
    </div>
</body>
</html>

Output: As you can see when the mouse hovers over the Share button pill the icons are revealed, here the example is for demo purposes, you can make the icons responsive and redirect accordingly or something creative.