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

• Dynamische Verlaufsübergänge: Auffällige Hover-Effekte mit Farbänderungen.
• Animationen skalieren und drehen: Subtile Bewegungen, um Aufmerksamkeit zu erregen.
• Klick-Feedback: Ein sanfter Verkleinerungseffekt beim Klicken.
• Ladeanzeige: Eine moderne „Weiterleitung...“-Meldung vor der Navigation.
• Vollständig ansprechendes Design: Optimiert für alle Bildschirmgrößen.

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:

• Erhöhen Sie die Benutzerinteraktion.
• Leiten Sie Besucher zu bestimmten Aktionen.
• Sorgen Sie dafür, dass sich Ihre Benutzeroberfläche elegant und professionell anfühlt.

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:

• Hover-Effekte: Die Schaltfläche wird leicht skaliert und gedreht, um eine dynamische Interaktion zu erzeugen.
• Hintergründe mit Farbverlauf: Verwenden Sie einen linearen Farbverlauf für einen modernen und lebendigen Look.
• Box-Schatten: Verleihen Sie der Schaltfläche mit geschichteten Schatten Tiefe.

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!