In diesem Beitrag lernst du, wie du einen animierten Button mit einer Border-Hover-Animation nur mit HTML und CSS erstellst. Ein Button ist ein grafisches Steuerelement, das dem Benutzer eine einfache Möglichkeit bietet, ein Ereignis auszulösen, wie beispielsweise das Absenden eines Formulars oder das Starten eines Downloads. Buttons werden auch verwendet, um Aktionen wie Erstellen, Bearbeiten oder Löschen von Informationen auszuführen.
In diesem Code (Button mit Border-Hover-Animation) gibt es auf der Webseite einen Button mit einem Farbverlauf-Border. Wenn du mit der Maus darüber fährst, beginnt der Rand des Buttons zu animieren, sich zu bewegen oder zu leuchten. Wenn du den Mauszeiger vom Button entfernst, hört die Animation des Borders auf. Diese Art von Border-Animation auf einem Button hast du vielleicht auf Plattformen wie CodePen gesehen.
Durch die Implementierung dieser Animation kannst du deinen Buttons ein dynamisches und ansprechendes Aussehen verleihen, das die Benutzerinteraktion verbessert und die Aufmerksamkeit auf wichtige Aktionen lenkt. Nutze HTML und CSS, um solche Effekte einfach und effektiv zu realisieren.
Schritt 1: HTML Datei erstellen
Um diesen Code (Border Hover Animation) zu erstellen, musst du zunächst zwei Dateien anlegen: eine HTML-Datei und eine CSS-Datei.
Zuerst erstellst du eine HTML-Datei mit dem Namen index.html und fügst den angegebenen Code in deine HTML-Datei ein. Denke daran, die Datei mit der Endung .html zu speichern.
<!DOCTYPE html> <!-- Created By CodingNepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Button Border Animation | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="btn"> <a href="#"><span>Hover Me</span></a> </div> </body> </html>
Schritt 2: CSS Datei erstellen
Erstelle anschließend eine CSS-Datei mit dem Namen style.css und füge den angegebenen Code in deine CSS-Datei ein. Denke daran, die Datei mit der Endung .css zu speichern.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100vh;
place-items: center;
background: #000;
}
.btn a{
position: relative;
color: #f5f5f5;
height: 70px;
width: 220px;
display: block;
text-align: center;
border-radius: 10px;
text-decoration: none;
background-image: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
}
.btn a:hover{
animation: rotate 0.4s linear infinite;
}
@keyframes rotate {
100%{
filter: hue-rotate(-360deg)
}
}
.btn a span{
height: 88%;
width: 96%;
background: #111;
display: block;
position: absolute;
top: 50%;
left: 50%;
border-radius: 6px;
line-height: 62px;
font-size: 25px;
transform: translate(-50%, -50%);
}
Fazit
Das ist alles! Du hast nun erfolgreich einen animierten Button mit Border-Hover-Animation unter Verwendung von HTML und CSS erstellt. Falls dein Code nicht funktioniert oder du auf Fehler/Probleme stößt, hinterlasse bitte einen Kommentar oder kontaktiere uns über die Kontaktseite.
admin
