CSS3 implements glowing button effect animation

When we usually see lottery draws or some event content pages, we often see some buttons with glowing effects to visually guide users to click. This effect is mainly achieved by using the animation effect of CSS3. Keyframes enlarge and change the size of elements. The opacity of the element, and the gradient stretching to set the corresponding button gradient.

The effect is as follows:

css3 to achieve glowing button effect

background-image: linear-gradient(to bottom right, #ef1212, #ff9800)

@keyframes spread {
            from {
                width: 120px;
                height: 120px;
                opacity: 1
                    /* transform: scale(1); */
            }

            to {
                width: 140px;
                height: 140px;
                opacity: 0;
                /* transform: scale(1.5); */
            }
        }

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .border {
            width: 120px;
            height: 120px;
            background-color: #ff9800;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            animation: spread linear 1.5s infinite;
        }
        .border2 {
            width: 120px;
            height: 120px;
            background-color: #ff9800;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            animation: spread2 linear 3s infinite;
        }

        .draw {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 18px;
            font-weight: bolder;
            color: #ffffff;
            border-radius: 50px;
            cursor: pointer;
            /* position: absolute; */
            /* left: 0;
            top: 0;
            right: 0;
            bottom: 0; */
            /* margin: 10px auto; */
            position: fixed;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            background-image: linear-gradient(to bottom right, #ef1212, #ff9800)
        }

        @keyframes spread {
            from {
                width: 120px;
                height: 120px;
                opacity: 1
                    /* transform: scale(1); */
            }

            to {
                width: 140px;
                height: 140px;
                opacity: 0;
                /* transform: scale(1.5); */
            }
        }
        @keyframes spread {
            from {
                width: 120px;
                height: 120px;
                opacity: 1
                    /* transform: scale(1); */
            }

            to {
                width: 140px;
                height: 140px;
                opacity: 0;
                /* transform: scale(1.5); */
            }
        }
    </style>
</head>

<body>
    <div class="border">

    </div>
    <div class="border2">

    </div>
    <div class="draw">
        参与抽奖
    </div>

</body>

</html>

CSS3 implements glowing button effect animation

Guess you like