Botón flotante

Abrir en el editor Publica tu código

Recomendado

9 September 2024

Botón de página no válida

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

Botón flotante

Recomendado

Botón de filtro SVG pegajoso

Botón de página no válida

HTML

CSS

JS

Recomendado

Botón de filtro SVG pegajoso

Botón de página no válida

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS