WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
5386
codex
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
30 January 2025
Schaltflächen Farbverlauf Hover
20 May 2025
Ein Code von Skyrreum
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) */
