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