Heim >Web-Frontend >CSS-Tutorial >Erstellen einer interaktiven CTA-Schaltfläche mit erweiterten Animationen
In diesem Artikel gehen wir Schritt für Schritt durch die Erstellung einer modernen Call-to-Action-Schaltfläche (CTA) mit eleganten Animationen und dynamischen Effekten mithilfe von HTML, CSS und JavaScript. Diese Schaltfläche ist nicht nur ein einfaches UI-Element – sie ist ein interaktives Herzstück, das die Benutzerinteraktion steigert und ein ausgefeiltes Erlebnis bietet.
Funktionen der Schaltfläche
Warum sich auf eine interaktive Schaltfläche konzentrieren?
Schaltflächen sind ein wichtiger Bestandteil jeder Weboberfläche. Ob es sich um ein Anmeldeformular, ein Werbeangebot oder einen Call-to-Action für Ihr Indie-Spiel handelt, eine gut gestaltete Schaltfläche kann:
Schritt 1: HTML-Struktur
Hier ist die Grundstruktur unseres Buttons. Der Anzeigencontainer enthält den Inhalt und die Grafiken, während der CTA-Button als unser wichtigstes interaktives Element dient.
<div> <p>Step 2: CSS Styling<br> The CSS brings the button to life with gradients, hover effects, and animations.<br> </p> <pre class="brush:php;toolbar:false">body { margin: 0; font-family: 'Poppins', sans-serif; background: radial-gradient(circle at top, #141E30, #243B55); color: white; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .ad-container { display: flex; align-items: center; justify-content: space-between; padding: 30px; background: rgba(255, 255, 255, 0.1); border-radius: 25px; backdrop-filter: blur(15px); box-shadow: 0px 25px 60px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.3); width: 90%; max-width: 1300px; animation: slideIn 1.5s ease-out; overflow: hidden; position: relative; z-index: 1; } .cta-button { display: inline-block; padding: 15px 35px; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; color: white; text-decoration: none; background: linear-gradient(45deg, #ff416c, #ff4b2b); border-radius: 50px; box-shadow: 0px 10px 25px rgba(255, 65, 108, 0.5); transition: transform 0.3s ease, box-shadow 0.3s ease; animation: pulse 3s infinite alternate; } .cta-button:hover { transform: scale(1.15) rotate(2deg); box-shadow: 0px 15px 30px rgba(255, 65, 108, 0.7); filter: brightness(1.2); }
Wichtige CSS-Highlights:
Schritt 3: Interaktivität mit JavaScript hinzufügen
JavaScript bietet reaktionsschnelles Feedback und ein reibungsloses Benutzererlebnis.
const ctaButton = document.querySelector('.cta-button'); // Dynamic gradient change on hover ctaButton.addEventListener('mouseover', () => { ctaButton.style.background = 'linear-gradient(90deg, #1e90ff, #00c6ff, #00ffa3)'; ctaButton.style.boxShadow = '0px 15px 35px rgba(30, 144, 255, 0.6)'; ctaButton.style.transform = 'scale(1.1) rotate(-2deg)'; ctaButton.style.transition = 'all 0.3s ease'; }); // Reset on mouse out ctaButton.addEventListener('mouseout', () => { ctaButton.style.background = 'linear-gradient(45deg, #ff416c, #ff4b2b)'; ctaButton.style.boxShadow = '0px 10px 20px rgba(255, 65, 108, 0.5)'; ctaButton.style.transform = 'scale(1) rotate(0deg)'; ctaButton.style.transition = 'all 0.3s ease'; }); // Click action ctaButton.addEventListener('click', () => { ctaButton.style.pointerEvents = 'none'; ctaButton.style.transform = 'scale(0.95)'; alert('Redirecting you to the game showcase page!'); setTimeout(() => { window.location.href = 'https://gladiatorsbattle.com/indie-games'; }, 1500); });
Live-Demo
Sie können eine Live-Demo auf CodePen ansehen, um die Schaltfläche in Aktion zu sehen. Spielen Sie mit den Stilen und Animationen, um es zu Ihrem eigenen zu machen!
https://codepen.io/HanGPIIIErr/pen/WNVqOyq
Warum das wichtig ist
Eine einfache Schaltfläche ist nicht nur ein UI-Element – sie bietet die Möglichkeit, Eindruck zu hinterlassen. Unabhängig davon, ob Sie ein Produkt bewerben oder Benutzer zu einer bestimmten Aktion leiten, verbessert eine ausgefeilte, interaktive Schaltfläche das Benutzererlebnis und steigert die Conversions.
Bewerben Sie Ihr Indie-Spiel!
Sind Sie ein Indie-Spieleentwickler und möchten Ihr Projekt vorstellen? Besuchen Sie GladiatorsBattle.com für eine kostenlose Plattform, auf der Sie Ihr Spiel hochladen und mit einer wachsenden Community in Kontakt treten können. Vergessen Sie nicht, unserer Discord-Community hier beizutreten: https://discord.gg/YBNF7KjGwx.
Lasst uns gemeinsam eine unglaubliche Community für YouTuber aufbauen! ?
Fazit
Interaktive UI-Elemente wie diese CTA-Schaltfläche können das Erscheinungsbild Ihrer Website verändern. Fühlen Sie sich frei, diesen Code zu verwenden, ihn zu optimieren und ihn zu Ihrem eigenen zu machen. Wenn Sie Feedback oder Verbesserungen haben, teilen Sie diese bitte in den Kommentaren unten mit! ?
Das obige ist der detaillierte Inhalt vonErstellen einer interaktiven CTA-Schaltfläche mit erweiterten Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!