Wed Jul 27 2022

Play Button with Pulse Effect

CSS9985 views


Play Button with Pulse Effect

File Name: play-button-with-pulse-effect.html

<!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>Play Button with Pulse Effect</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #292929;
        }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        a.playBtn {
            width: 80px;
            height: 80px;
            background-color: #e1434b;
            border-radius: 100%;
            border: #fff solid 2px;
            position: relative;
            animation: shadowPulse 1s infinite linear;
        }

        a.playBtn::before {
            position: absolute;
            content: '';
            border-top: transparent 15px solid;
            border-bottom: transparent 15px solid;
            border-left: #fff 25px solid;
            top: 50%;
            left: 50%;
            transform: translate(-40%, -50%);
        }

        a.playBtn::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: #fff solid 2px;
            border-radius: 100%;
            animation: ringPulse 1s infinite linear;
        }

        @keyframes ringPulse {
            0% {
                opacity: 0;
                transform: scale(0.95);
            }

            10% {
                opacity: 1;
            }

            80%, 100% {
                opacity: 0;
                transform: scale(2);
            }
        }

        @keyframes shadowPulse {
            0% {
                box-shadow: 0 0 8px 6px transparent,
                            0 0 0 0 transparent,
                            0 0 0 0 transparent;
            }

            10% {
                box-shadow: 0 0 8px 6px #e1434b,
                            0 0 12px 10px transparent,
                            0 0 12px 5px #e1434b;
            }

            80%, 100% {
                box-shadow: 0 0 8px 6px transparent,
                            0 0 0 40px transparent,
                            0 0 0 40px transparent;
            }
        }
    </style>
</head>
<body>
    <section>
        <a href="" class="playBtn"></a>
    </section>
</body>
</html>

Result Screenshot(s)

Play Button with Pulse EffectWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.