Bouton de survol

881 ledoc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 March 2023

Barre de navigation Bootstrap responsive

26 December 2024

Un code de DEME

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);}
}

Bouton de survol

Recommandé

Barre de navigation Bootstrap responsive

Un code par efficientcloud646

Un code de DEME

HTML

CSS

JS

Recommandé

Barre de navigation Bootstrap responsive

Un code par efficientcloud646

Un code de DEME

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS