Collegamento animato al passaggio del mouse

1127 ledoc

Apri nell'Editor Pubblica il Tuo Codice

Collegamento animato al passaggio del mouse

Consigliato

10 July 2025

Esempio HTML della schermata di caricamento animata CSS

21 August 2025

Contenitore di animazione CSS con conto alla rovescia

1 December 2024

Colore sfumato al passaggio del mouse

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

Esempio HTML della schermata di caricamento animata CSS

Contenitore di animazione CSS con conto alla rovescia

Colore sfumato al passaggio del mouse

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS