मूल HTML बटन उदाहरण

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

27 February 2024

CSS स्मूथ टॉगल स्विच कोड उदाहरण

21 July 2025

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(16, 23, 10);
}
button {
 --glow-color: rgb(47, 172, 124);
 --glow-spread-color: rgba(182, 255, 238, 0.781);
 --enhanced-glow-color: rgb(11, 74, 101);
 --btn-color: rgb(40, 200, 212);
 border: .25em solid var(--glow-color);
 padding: 1em 3em;
 color: var(--glow-color);
 font-size: 15px;
 font-weight: bold;
 background-color: var(--btn-color);
 border-radius: 1em;
 outline: none;
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
 text-shadow: 0 0 .5em var(--glow-color);
 position: relative;
 transition: all 0.3s;
}

button::after {
 pointer-events: none;
 content: "";
 position: absolute;
 top: 120%;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: var(--glow-spread-color);
 filter: blur(2em);
 opacity: .7;
 transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

button:hover {
 color: var(--btn-color);
 background-color: var(--glow-color);
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 2em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
}

button:active {
 box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
}

मूल HTML बटन उदाहरण

अनुशंसित

सिम्पल एचटीएमएल सीएसएस बटन

CSS स्मूथ टॉगल स्विच कोड उदाहरण

UNO कार्ड HTML CSS उदाहरण

HTML

CSS

JS

अनुशंसित

सिम्पल एचटीएमएल सीएसएस बटन

CSS स्मूथ टॉगल स्विच कोड उदाहरण

UNO कार्ड HTML CSS उदाहरण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS