Boutons lumineux CSS

2072 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 September 2025

Exemple d'animation HTML de sphère CSS

29 September 2025

Animation de chargement CSS avec image d'arrière-plan

8 September 2025

Animation de texte CSS : effet d'écho

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #151F28;
    flex-direction: column;
    gap: 50px; 
}

a{
    position: relative;
    background: #fff;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    font-weight: 400;
    padding: 10px 30px;
    transition: 0.5s;
}

a:hover{
    background: var(--clr);
    color: var(--clr);
    letter-spacing: 0.25em;
    box-shadow: 0 0 35px var(--clr);
}

a::before{
    content: '';
    position: absolute;
    inset: 2px;
    background: #151F28;
}

a span{
    position: relative;
    z-index: 1;
}

a i{
    position: absolute;
    inset: 0;
    display: block;
}

a i::before{
    content: '';
    position: absolute;
    top: 0;
    left: 80%;
    width: 10px;
    height: 4px;
    background: #151F28;
    transform: translateX(-50%) skewX(325deg);
    transition: 0.5s;
}

a:hover i::before{
    width: 20px;
    left: 20%;
}

a i::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 10px;
    height: 4px;
    background: #151F28;
    transform: translateX(-50%) skewX(325deg);
    transition: 0.5s;
}

a:hover i::after{
    width: 20px;
    left: 80%;
}

Recommandé

Exemple d'animation HTML de sphère CSS

Animation de chargement CSS avec image d'arrière-plan

Animation de texte CSS : effet d'écho

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS