WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Collegamento animato al passaggio del mouse
1324
ledoc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
15 September 2024
Modulo di accesso animato
22 November 2025
Codice HTML del gioco Snake
20 September 2025
Modello di modulo di accesso HTML a forma di girasole
HTML
Copy
Link to
Google
CSS
Copy
@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; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */