WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Farbverlauf beim Hovern
628
ledoc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
16 November 2024
HTML-Farbverlaufskarte
30 January 2025
Schaltflächen Farbverlauf Hover
19 November 2024
Text beim Hovern anzeigen
HTML
Copy
Hover me
Hover me
Hover me
Hover me
Hover me
CSS
Copy
.btn { margin: 10px; padding: 30px; text-align: center; text-transform: uppercase; transition: 0.5s; background: linear-gradient(90deg, var(--c1, #f6d365), var(--c2, #fda085) 51%, var(--c1, #f6d365)) var(--x, 0)/ 200%; color: white; text-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0 0 20px #eee; border-radius: 10px; } .btn-1 { --c1: #f6d365; --c2: #fda085; } .btn-2 { --c1: #fbc2eb; --c2: #a6c1ee; } .btn-3 { --c1: #84fab0; --c2: #8fd3f4; } .btn-4 { --c1: #a1c4fd; --c2: #c2e9fb; } .btn-5 { --c1: #ffecd2; --c2: #fcb69f; } .btn:hover { --x: 100%; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */