Exemple de bouton HTML de base

850 sergioarmijo30

Ouvrir dans l'éditeur Publiez votre code

Recommandé

12 August 2025

Extrait de code d'animation CSS Heart

12 October 2025

Animation de chargement CSS Structure HTML

1 August 2025

Rectangles verticaux déplaçables 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);
}

Recommandé

Extrait de code d'animation CSS Heart

Animation de chargement CSS Structure HTML

Rectangles verticaux déplaçables HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS