Loading Buttons Using HTML and CSS

HTML

CSS

Output

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>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

.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%;
            }
        }

Ui Code Snippets

Loading Buttons Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Loading Buttons Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course