Collegamento animato al passaggio del mouse

949 ledoc

Apri nell'Editor Pubblica il Tuo Codice

Collegamento animato al passaggio del mouse

Consigliato

31 July 2025

Modello HTML della pagina di accesso Liquid Drop

22 July 2025

Pagina di destinazione del Samsung Galaxy S24 Ultra

22 June 2025

l'enigma del tempo

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

Consigliato

Modello HTML della pagina di accesso Liquid Drop

Pagina di destinazione del Samsung Galaxy S24 Ultra

l'enigma del tempo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS