WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Botón flotante
1307
ledoc
Abrir en el editor
Publica tu código
Recomendado
15 October 2024
Botón de modo oscuro y modo nocturno
3 March 2025
Botón oscuro y claro
HTML
Copy
Button Hover effect
View Careers
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw; display: grid; place-items: center; font-family: "Clash Grotesk"; background-color: black; } .hover-text { font-size: 32px; text-decoration: none; text-transform: uppercase; letter-spacing: 5px; font-weight: lighter; display: block; border-radius: 40px; position: relative; border: 1px solid #ffffff2d; padding: 15px 50px; color: white; overflow: hidden; transition: 0.7s cubic-bezier(0.87, 0, 0.13, 1); } .hover-text::before { content: "View Careers"; position: absolute; padding: 15px 50px; border-radius: 110%; white-space: nowrap; transition: 0.7s cubic-bezier(0.87, 0, 0.13, 1); pointer-events: none; top: 0%; left: 0px; background-color: white; color: black; transform: perspective(25rem) rotateX(-67deg); top: 100%; left: 0px; } .hover-text span { position: relative; transition: 0.7s cubic-bezier(0.87, 0, 0.13, 1); display: block; pointer-events: none; } .hover-text:hover::before { transform: rotateX(0) translateY(-100%); border-radius: 0px; } .hover-text:hover > span { transform: perspective(25rem) rotateX(67deg) translateY(-140px); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */