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

846 sergioarmijo30

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

अनुशंसित

28 June 2025

HTML बाइक रेंटल वेबसाइट टेम्पलेट

10 November 2024

HTML CSS OTP फॉर्म

23 August 2025

लॉगिन पृष्ठ HTML: फ़िंगरप्रिंट प्रमाणीकरण के साथ मैट्रिक्स थीम

HTML

CSS

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 बाइक रेंटल वेबसाइट टेम्पलेट

HTML CSS OTP फॉर्म

लॉगिन पृष्ठ HTML: फ़िंगरप्रिंट प्रमाणीकरण के साथ मैट्रिक्स थीम

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS