Bouton poussoir d'accueil CodePen

1720 zegarkidawida

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

18 October 2025

Modèle HTML de base avec bouton (espagnol)

26 June 2024

Bouton de médias sociaux multiples

29 October 2025

Exemple d'animation de bouton HTML CSS

HTML

CSS

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background-color: rgba(225, 225, 225, 1);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

button {
    all: unset;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
    border-radius: 999vw;
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
        0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
}

button::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: calc(100% + 0.3em);
    height: calc(100% + 0.3em);
    top: -0.15em;
    left: -0.15em;
    border-radius: inherit;
    background: linear-gradient(-135deg,
            rgba(5, 5, 5, 0.5),
            transparent 20%,
            transparent 100%);
    filter: blur(0.0125em);
    opacity: 0.25;
    mix-blend-mode: multiply;
}

button .button-outer {
    position: relative;
    z-index: 1;
    border-radius: inherit;
    transition: box-shadow 300ms ease;
    will-change: box-shadow;
    box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
        0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
        0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
}

button:hover .button-outer {
    box-shadow: 0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5),
        0 0 0 0 rgba(5, 5, 5, 0.25);
}

.button-inner {
    --inset: 0.035em;
    position: relative;
    z-index: 1;
    border-radius: inherit;
    padding: 1em 1.5em;
    background-image: linear-gradient(135deg,
            rgba(230, 230, 230, 1),
            rgba(180, 180, 180, 1));
    transition: box-shadow 300ms ease, clip-path 250ms ease,
        background-image 250ms ease, transform 250ms ease;
    will-change: box-shadow, clip-path, background-image, transform;
    overflow: clip;
    clip-path: inset(0 0 0 0 round 999vw);
    box-shadow:
        /* 1 */
        0 0 0 0 inset rgba(5, 5, 5, 0.1),
        /* 2 */
        -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
        /* 3 */
        0 0 0 0 inset rgba(5, 5, 5, 0.1),
        /* 4 */
        0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
        /* 5 */
        0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
        /* 6 */
        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
        /* 7 */
        -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
}

button:hover .button-inner {
    clip-path: inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 999vw);
    box-shadow:
        /* 1 */
        0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
        /* 2 */
        -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
        /* 3 */
        0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
        /* 4 */
        0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
        /* 5 */
        0 0 0 0 inset rgba(255, 255, 255, 1),
        /* 6 */
        0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
        /* 7 */
        -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
}

button .button-inner span {
    position: relative;
    z-index: 4;
    font-family: "Inter", sans-serif;
    letter-spacing: -0.05em;
    font-weight: 500;
    color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(135deg,
            rgba(25, 25, 25, 1),
            rgba(75, 75, 75, 1));
    -webkit-background-clip: text;
    background-clip: text;
    transition: transform 250ms ease;
    display: block;
    will-change: transform;
    text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

button:hover .button-inner span {
    transform: scale(0.975);
}

button:active .button-inner {
    transform: scale(0.975);
}

Recommandé

Modèle HTML de base avec bouton (espagnol)

Bouton de médias sociaux multiples

Exemple d'animation de bouton HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS