WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
Link to
Google
@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; }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
Link to
Google
@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; }
/* Replace with your JS Code (Leave empty if not needed) */