WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Farbverlauf beim Hovern
1339
ledoc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
1 January 2025
CSS-Animation mit Farbverlaufstext
1 July 2025
Modernes Kontaktformular mit Farbverlauf
6 August 2025
Leuchtendes Karussell: Farbverlaufstext und Popups in Bewegung
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) */
