WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Farbverlauf beim Hovern
1065
ledoc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
30 November 2024
Fehler beim Zurückschicken des Passworts
20 October 2024
CSS-Farbverlaufsschaltfläche
HTML
Copy
<a class="btn btn-1">Hover me</a> <a class="btn btn-2">Hover me</a> <a class="btn btn-3">Hover me</a> <a class="btn btn-4">Hover me</a> <a class="btn btn-5">Hover me</a>
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) */
