Botón flotante

1646 ledoc

Abrir en el editor Video Publica tu código

Recomendado

19 January 2024

Botón de Cambio de Tema

18 October 2025

Botón HTML con efecto de desplazamiento (WEBLEB)

22 November 2025

Efecto de desplazamiento de botón de vidrio líquido CSS

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

Recomendado

Botón de Cambio de Tema

Botón HTML con efecto de desplazamiento (WEBLEB)

Efecto de desplazamiento de botón de vidrio líquido CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS