Bouton de survol

1479 ledoc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

6 November 2024

un site Web où vous pouvez écouter des chansons

21 December 2025

Lecteur audio HTML avec liste de lecture et commandes

17 December 2025

Barre de navigation inférieure avec icônes et CSS Tailwind

HTML

CSS

:root {
    --bg: #2E3B4E; 
    --primary: #FF6F61; 
    --solid: #FFFFFF; 
    --btn-w: 10em;
    --dot-w: calc(var(--btn-w) * 0.2);
    --tr-X: calc(var(--btn-w) - var(--dot-w));
}

* {
    box-sizing: border-box;
}

*:before, *:after {
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    background: var(--bg);
    font-size: 20px;
    font-family: 'Titillium Web', sans-serif;
}

h1 {
    color: var(--solid);
    font-size: 2.5rem;
    margin-top: 6rem;
}

.btn {
    position: relative;
    margin: 0 auto;
    width: var(--btn-w);
    color: var(--primary);
    border: .15em solid var(--primary);
    border-radius: 5em;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.3em;
    line-height: 2em;
    cursor: pointer;
}

.dot {
    content: '';
    position: absolute;
    top: 0;
    width: var(--dot-w);
    height: 100%;
    border-radius: 100%;
    transition: all 300ms ease;
    display: none;
}

.dot:after {
    content: '';
    position: absolute;
    left: calc(50% - .4em);
    top: -.4em;
    height: .8em;
    width: .8em;
    background: var(--primary);
    border-radius: 1em;
    border: .25em solid var(--solid);
    box-shadow: 0 0 .7em var(--solid), 0 0 2em var(--primary);
}

.btn:hover .dot,
.btn:focus .dot {
    animation: atom 2s infinite linear;
    display: block;
}

@keyframes atom {
   0% {transform: translateX(0) rotate(0);}
   30% {transform: translateX(var(--tr-X)) rotate(0);}
   50% {transform: translateX(var(--tr-X)) rotate(180deg);}
   80% {transform: translateX(0) rotate(180deg);}
   100% {transform: translateX(0) rotate(360deg);}
}

Recommandé

un site Web où vous pouvez écouter des chansons

Lecteur audio HTML avec liste de lecture et commandes

Barre de navigation inférieure avec icônes et CSS Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS