WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
5104
codex
Abrir no Editor
Publique Seu Código
Recomendado
23 June 2025
Um código de Mete
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CSS Button</title> <link rel="stylesheet" href="/css/styles.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap" rel="stylesheet"> </head> <body> <button>Submit</button> </body> </html>
CSS
Copy
body{ background-color: #212121; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } button{ padding: 0.8em 1.8em; border-radius: 8px; background-color: transparent; color:#17c3b2; border:2px solid #17c3b2; font-size: 16px; cursor: pointer; z-index: 1; transition: 0.3s; overflow:hidden ; position: relative; } button:before{ content:''; width: 0; height: 300%; position: absolute; top: 50%; left: 50%; transition: 0.5s ease; transform: translate(-50%,-50%) rotate(45deg); display: block; z-index: -1; background-color: #17c3b2; } button:hover::before{ width: 105%; } button:hover{ color:#111; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
