Loading Buttons Using HTML and CSS

HTML

CSS

Output

HTML Copied

<!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>Loading Buttons Using HTML and CSS</title>
</head>

<body>

<div class="body">
        <button class="buttonCls">
            Button 1 <span class="innerLoadableArea innerLoadableArea-1"> </span>
        </button>

<button class="buttonCls ">
            Button 2 <span class="innerLoadableArea innerLoadableArea-2"> </span>
        </button>

<button class="buttonCls">
            Button 3 <span class="innerLoadableArea innerLoadableArea-3"> </span>
        </button>

<button class="buttonCls">
            Button 4
            <span class="innerLoadableArea innerLoadableArea-4">
                <span class="innerLoadableArea-4-dot innerLoadableArea-4-span1"></span>
                <span class="innerLoadableArea-4-dot innerLoadableArea-4-span2"></span>
                <span class="innerLoadableArea-4-dot innerLoadableArea-4-span3"></span>
            </span>
        </button>

<button class="buttonCls">
            Button 5 <span class="innerLoadableArea innerLoadableArea-5"> </span>
        </button>

<button class="buttonCls">
            Button 6 <span class="innerLoadableArea innerLoadableArea-6"> </span>
        </button>

<button class="buttonCls"> Button 7 <span
                class="innerLoadableArea innerLoadableArea-7"> </span> </button>

<button style="border-radius: 0px" class="buttonCls">
            Button 8
            <span class="innerLoadableArea innerLoadableArea-8">
                <span class="innerLoadableArea-8-span1"></span>
                <span class="innerLoadableArea-8-span2"></span>
                <span class="innerLoadableArea-8-span3"></span>
                <span class="innerLoadableArea-8-span4"></span>
            </span>
        </button>

<button style="border-radius: 0px" class="buttonCls">
            Button 9
            <span class="innerLoadableArea innerLoadableArea-9">
                <span class="innerLoadableArea-9-span1"></span>
                <span class="innerLoadableArea-9-span2"></span>
                <span class="innerLoadableArea-9-span3"></span>
                <span class="innerLoadableArea-9-span4"></span>
            </span>
        </button>

</div>
</body>

</html>

CSS Copied

.body {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin: 0;
            gap: 1rem;
            padding: 1rem;
        }

.buttonCls {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            background-color: rgb(255, 0, 106);
            border: 0px;
            border-radius: 50px;
            box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
            font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial,
                sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
            font-size: 20px;
            font-weight: 600;
            line-height: 20px;
            padding: 18px;
            width: 200px;
            position: relative;
            text-align: center;
            overflow: hidden;
            transition: all 0.25s ease;
        }

.buttonCls:active {
            transform: scale(0.85);
        }

.loadButtons .innerLoadableArea {
            visibility: hidden;
            opacity: 0;
        }

.innerLoadableArea-1 {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: inherit;
        }

.innerLoadableArea-1:after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 3px solid #fff;
            width: 30px;
            height: 30px;
            border-left: 3px solid transparent;
            border-bottom: 3px solid transparent;
            animation: innerLoadableArea1 1s ease infinite;
            z-index: 10;
        }

.innerLoadableArea-1:before {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 3px dashed #fff;
            width: 30px;
            height: 30px;
            border-left: 3px solid transparent;
            border-bottom: 3px solid transparent;
            animation: innerLoadableArea1 1s linear infinite;
            z-index: 5;
        }

@keyframes innerLoadableArea1 {
            0% {
                transform: rotate(0deg);
            }

100% {
                transform: rotate(360deg);
            }
        }

.innerLoadableArea-2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 0, 106, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.innerLoadableArea-2:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            animation: innerLoadableArea2 1s ease infinite;
            z-index: 10;
            background: rgba(255, 255, 255, 0.30);
        }

.innerLoadableArea-2:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            animation: innerLoadableArea2 1s ease-out infinite;
            z-index: 10;
            background: rgba(255, 255, 255, 0.30);
        }

@keyframes innerLoadableArea2 {
            0% {
                transform: translate(0, 100%);
            }

100% {
                transform: translate(0, -100%);
            }
        }

.innerLoadableArea-3 {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 0, 106, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.innerLoadableArea-3:after {
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 4px;
            animation: innerLoadableArea3 1s ease infinite;
            z-index: 10;
            background: rgb(255, 255, 255);
            border-radius: 10px;
        }

@keyframes innerLoadableArea3 {
            0% {
                width: 0;
            }

50% {
                width: 100%;
            }

100% {
                width: 100%;
                opacity: 0;
            }
        }

.innerLoadableArea-4 {
            position: absolute;
            bottom: 00;
            right: 0;
            width: 100%;
            height: 100%;
            background: rgb(255, 0, 106);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.innerLoadableArea-4-dot {
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
        }

.innerLoadableArea-4-span1 {
            animation: innerLoadableArea4 1s ease infinite;
        }

.innerLoadableArea-4-span2 {
            animation: innerLoadableArea4 1s ease infinite 0.5s;
        }

.innerLoadableArea-4-span3 {
            animation: innerLoadableArea4 1s ease infinite 1s;
        }

@keyframes innerLoadableArea4 {
            0% {
                transform: translate(-40px) scale(0);
            }

50% {
                transform: translate(0px) scale(1);
            }

100% {
                transform: translate(40px) scale(0);
            }
        }

.innerLoadableArea-5 {
            position: absolute;
            bottom: 00;
            right: 0;
            width: 100%;
            height: 100%;
            background: rgb(255, 0, 106, 0.75);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            animation: innerLoadableArea5 1.5s ease-in-out 0s infinite;
        }

@keyframes innerLoadableArea5 {
            0% {
                transform: translateX(-200px);
            }

100% {
                transform: translateX(200px);
            }
        }

.innerLoadableArea-6 {
            position: absolute;
            bottom: 00;
            right: 0;
            width: 100%;
            height: 100%;
            background: rgb(255, 0, 106);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.innerLoadableArea-6:before {
            content: "";
            width: 30px;
            height: 30px;
            background: #fff;
            position: absolute;
            border-radius: 50%;
            animation: innerLoadableArea6 1.5s ease infinite;
        }

.innerLoadableArea-6:after {
            content: "";
            width: 40px;
            height: 40px;
            border: 5px solid rgb(255, 255, 255, 0.5);
            position: absolute;
            border-radius: 50%;
            animation: innerLoadableArea6 3s ease infinite;
        }

@keyframes innerLoadableArea6 {
            0% {
                transform: scale(0);
            }

50% {
                transform: scale(1);
            }

100% {
                transform: scale(0);
            }
        }

.innerLoadableArea-7 {
            position: absolute;
            bottom: 00;
            right: 0;
            width: 100%;
            height: 100%;
            background: rgb(255, 0, 106);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.innerLoadableArea-7:before {
            content: "";
            width: 30px;
            height: 30px;
            background: #fff;
            position: absolute;
            border-radius: 50%;
            animation: innerLoadableArea7 1s ease infinite;
        }

.innerLoadableArea-7:after {
            content: "";
            width: 40px;
            height: 40px;
            border: 5px solid rgb(255, 255, 255, 0.5);
            position: absolute;
            border-radius: 50%;
            animation: innerLoadableArea7 1s ease infinite 0.5s;
        }

@keyframes innerLoadableArea7 {
            0% {
                transform: scale(0);
            }

50% {
                transform: scale(1);
            }

100% {
                transform: scale(0);
            }
        }

.innerLoadableArea-8 {
            position: absolute;
            left: 10px;
            bottom: 10px;
            width: calc(100% - 20px);
            height: calc(100% - 20px);
            background: rgb(255, 0, 106);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.innerLoadableArea-8 span {
            background: #ffff;
            position: absolute;
        }

.innerLoadableArea-8 .innerLoadableArea-8-span1 {
            width: 100%;
            height: 5px;
            left: 0px;
            bottom: 0px;
            transform: translate(-100%);
            animation: innerLoadableArea8-1 2s linear infinite;
        }

@keyframes innerLoadableArea8-1 {
            100% {
                transform: translate(100%);
            }
        }

.innerLoadableArea-8 .innerLoadableArea-8-span2 {
            width: 5px;
            height: 100%;
            right: 0px;
            bottom: 0px;
            transform: translate(0, 100%);
            animation: innerLoadableArea8-2 2s linear infinite 1s;
        }

@keyframes innerLoadableArea8-2 {
            100% {
                transform: translate(0, -100%);
            }
        }

.innerLoadableArea-8 .innerLoadableArea-8-span3 {
            width: 100%;
            height: 5px;
            right: 0px;
            top: 0px;
            transform: translate(100%);
            animation: innerLoadableArea8-3 2s linear infinite;
        }

@keyframes innerLoadableArea8-3 {
            100% {
                transform: translate(-100%);
            }
        }

.innerLoadableArea-8 .innerLoadableArea-8-span4 {
            width: 5px;
            height: 100%;
            left: 0px;
            top: 0px;
            transform: translate(0, -100%);
            animation: innerLoadableArea8-4 2s linear infinite 1s;
        }

@keyframes innerLoadableArea8-4 {
            100% {
                transform: translate(0, 100%);
            }
        }

.innerLoadableArea-9 {
            position: absolute;
            left: 10px;
            bottom: 10px;
            width: calc(100% - 20px);
            height: calc(100% - 20px);
            background: rgb(255, 0, 85);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.innerLoadableArea-9 span {
            background: #ffff;
            position: absolute;
        }

.innerLoadableArea-9 .innerLoadableArea-9-span1 {
            top: 0;
            left: -100%;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, transparent, #fff);
            animation: btn-anim1 1s linear infinite;
        }

@keyframes btn-anim1 {
            0% {
                left: -100%;
            }

50%,
            100% {
                left: 100%;
            }
        }

.innerLoadableArea-9 .innerLoadableArea-9-span2 {
            top: -100%;
            right: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #fff);
            animation: btn-anim2 1s linear infinite;
            animation-delay: 0.25s;
        }

@keyframes btn-anim2 {
            0% {
                top: -100%;
            }

50%,
            100% {
                top: 100%;
            }
        }

.innerLoadableArea-9 .innerLoadableArea-9-span3 {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 5px;
            background: linear-gradient(270deg, transparent, #fff);
            animation: btn-anim3 1s linear infinite;
            animation-delay: 0.5s;
        }

@keyframes btn-anim3 {
            0% {
                right: -100%;
            }

50%,
            100% {
                right: 100%;
            }
        }

.innerLoadableArea-9 .innerLoadableArea-9-span4 {
            bottom: -100%;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #fff);
            animation: btn-anim4 1s linear infinite;
            animation-delay: 0.75s;
        }

@keyframes btn-anim4 {
            0% {
                bottom: -100%;
            }

50%,
            100% {
                bottom: 100%;
            }
        }

Loading Buttons Using HTML and CSS

JS Copied

Output