Enlace animado al pasar el mouse

1586 ledoc

Abrir en el editor Video Publica tu código

Recomendado

25 August 2024

Efecto de desplazamiento al navegar CSS puro

3 December 2025

Visualización de cuadrícula CSS de matriz Hadamard

27 December 2025

Sobre de carta de amor animado en HTML con GSAP

HTML

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,400,900);

a {
    -moz-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    -o-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    -webkit-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    white-space: nowrap;
    font-family: "Lato";
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: #ff4851;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

a:after {
    content: attr(href);
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    -webkit-transition: all 0s linear;
    transition: all 0s linear;
    overflow: hidden;
    background-color: #ff4851;
    text-transform: lowercase;
    position: absolute;
    font-size: 10px;
    letter-spacing: 0;
    font-weight: 500;
    bottom: -8px;
    left: 0;
    width: 100%;
    display: inline-block;
    -moz-transform: translate(-15px, 100%);
    -ms-transform: translate(-15px, 100%);
    -webkit-transform: translate(-15px, 100%);
    transform: translate(-15px, 100%);
    padding: 0 15px;
    max-height: 0;
    z-index: -1;
}

a:before {
    content: "";
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    -o-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    -webkit-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ff4851;
    bottom: -5px;
    z-index: -2;
}

a:hover {
    color: white;
}

a:hover:before {
    padding: 10px 15px;
    margin-left: -15px;
    bottom: -10px;
    height: 100%;
}

a:hover:after {
    -moz-transition: all 0.25s cubic-bezier(0.46, 0.01, 0.14, 1.35) 0.3s;
    -o-transition: all 0.25s cubic-bezier(0.46, 0.01, 0.14, 1.35) 0.3s;
    -webkit-transition: all 0.25s cubic-bezier(0.46, 0.01, 0.14, 1.35);
    -webkit-transition-delay: 0.3s;
    transition: all 0.25s cubic-bezier(0.46, 0.01, 0.14, 1.35) 0.3s;
    -moz-transform: translate(-15px, 50%);
    -ms-transform: translate(-15px, 50%);
    -webkit-transform: translate(-15px, 50%);
    transform: translate(-15px, 50%);
    padding: 10px 15px;
    max-height: 30px;
    opacity: 1;
}

Recomendado

Efecto de desplazamiento al navegar CSS puro

Visualización de cuadrícula CSS de matriz Hadamard

Sobre de carta de amor animado en HTML con GSAP

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS