CSS Acht auffällige HOVER-Effekt-Beispielcodes

<div id="senden-btn">
  <Schaltfläche>
    // Dies ist ein Platzhalter für SVG Senden
  </button>
</div>

#senden-btn{
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Höhe: 100vh;
}

Taste {
  Hintergrund: #5f55af;
  Rand: 0;
  Rahmenradius: 5px;
  Polsterung: 10px 30px 10px 20px;
  Farbe: weiß;
  Texttransformation: Großbuchstaben;
  Schriftstärke: fett;
}

Schaltfläche "Svg" {
  Anzeige: Inline-Block;
  vertikale Ausrichtung: Mitte;
  Polsterung rechts: 5px;
}

Schaltfläche:Hover svg {
  Animation: Fliegen, 2 s, Leichtigkeit 1;
}

@keyframes fliegen {
  0% {
    transformieren: übersetzenX(0%);
  }

  50 % {
    transformieren: übersetzenX(300%);
  }

  100 % {
    transformieren: übersetzenX(0);
  }
}

<div id="neon-btn">
  <button class="btn one">Bewege den Mauszeiger über mich</button>
  <button class="btn two">Bewege den Mauszeiger über mich</button>
  <button class="btn three">Bewege den Mauszeiger über mich</button>
</div>

#neon-btn {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand herum;
  Höhe: 100vh;
  Hintergrund: #031628; 
}

.btn {
  Rand: 1px durchgezogen;
  Hintergrundfarbe: transparent;
  Texttransformation: Großbuchstaben;
  Schriftgröße: 14px;
  Polsterung: 10px 20px;
  Schriftstärke: 300;
}

.eins {
  Farbe: #4cc9f0;
}

.zwei {
  Farbe: #f038ff; 
}

.drei {
  Farbe: #b9e769;
}

.btn:hover {
  Farbe: weiß;
  Rand: 0;
}

.eins:schweben {
  Hintergrundfarbe: #4cc9f0;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  Kastenschatten: 10px 10px 99px 6px rgba (76,201,240,1);
}

.zwei:hover {
  Hintergrundfarbe: #f038ff;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  Boxschatten: 10px 10px 99px 6px rgba (240, 56, 255, 1);
}

.drei:schweben {
  Hintergrundfarbe: #b9e769;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  Boxschatten: 10px 10px 99px 6px rgba (185, 231, 105, 1);
}

<div id="Rahmen zeichnen">
  <button>Bewegen Sie den Mauszeiger über mich</button>
</div>

#Rahmen zeichnen {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Höhe: 100vh;
}

Taste {
  Rand: 0;
  Hintergrund: keiner;
  Texttransformation: Großbuchstaben;
  Farbe: #4361ee;
  Schriftstärke: fett;
  Position: relativ;
  Gliederung: keine;
  Polsterung: 10px 20px;
  Box-Größe: Rahmenbox;
}

button::vorher, button::nachher {
  Box-Dimensionierung: erben;
  Position: absolut;
  Inhalt: '';
  Rand: 2px durchgehend transparent;
  Breite: 0;
  Höhe: 0;
}

button::nach {
  unten: 0;
  rechts: 0;
}

button::vor {
  oben: 0;
  links: 0;
}

button:hover::vorher, button:hover::nachher {
  Breite: 100 %;
  Höhe: 100%;
}

button:hover::vor {
  Rahmenoberseite-Farbe: #4361ee;
  Rahmenfarbe rechts: #4361ee;
  Übergang: Breite 0,3 s, Auslaufen, Höhe 0,3 s, Auslaufen 0,3 s;
}

Schaltfläche:Hover::nach {
  Rahmenunterseite-Farbe: #4361ee;
  Rahmenfarbe links: #4361ee;
  Übergang: Rahmenfarbe 0 s, Auslaufzeit 0,6 s, Breite 0,3 s, Auslaufzeit 0,6 s, Höhe 0,3 s, Auslaufzeit 1 s;
}

<div id="Kreis-btn">
  <div Klasse="btn-container">
    // Hier ist ein SVG-Element <button>Bewege den Mauszeiger darüber</button>
  </div>
</div>

#Kreis-btn { 
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Höhe: 100vh;
}

.btn-container {
  Position: relativ;  
}

Taste {
  Rand: 0;
  Rahmenradius: 50px;
  Farbe: weiß;
  Hintergrund: #5f55af;
  Polsterung: 15px 20px 16px 60px;
  Texttransformation: Großbuchstaben;
  Hintergrund: linearer Farbverlauf (nach rechts, #f72585 50 %, #5f55af 50 %);
  Hintergrundgröße: 200 % 100 %;
  Hintergrundposition: rechts unten;
  Übergang: alle 2er leicht;
}

svg {
  Hintergrund: #f72585;
  Polsterung: 8px;
  Randradius: 50 %;
  Position: absolut;
  links: 0;
  oben: 0%;
}

Schaltfläche: schweben {
   Hintergrundposition: links unten;
}

<div id="border-btn">
  <button>Bewegen Sie den Mauszeiger über mich</button>
</div>

#border-btn { 
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Höhe: 100vh;
}
Taste {
Rand: 0;
Rahmenradius: 10px;
Hintergrund: #2ec4b6;
Texttransformation: Großbuchstaben;
Farbe: weiß;
Schriftgröße: 16px;
Schriftstärke: fett;
Polsterung: 15px 30px;
Gliederung: keine;
Position: relativ;
Übergang: Randradius 3 s;
-webkit-transition: Rahmenradius 3s;
}


Schaltfläche: schweben {
Rahmen unten rechts – Radius: 50px;
Rahmen oben links – Radius: 50px;
Rahmen unten links – Radius: 10px;
Rahmen oben rechts – Radius: 10px;
}

<div id="gefroren-btn">
  <button class="green">Bewege den Mauszeiger über mich</button>
  <button class="purple">Bewege den Mauszeiger über mich</button>
</div>

#gefroren-btn {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Höhe: 100vh;
}

Taste {
  Rand: 0;
  Rand: 20px;
  Texttransformation: Großbuchstaben;
  Schriftgröße: 20px;
  Schriftstärke: fett;
  Polsterung: 15px 50px;
  Rahmenradius: 50px;
  Farbe: weiß;
  Gliederung: keine;
  Position: relativ;
}

Schaltfläche:vor{
  Inhalt: '';
  Anzeige: Block;
  Hintergrund: linearer Farbverlauf (nach links, rgba(255, 255, 255, 0) 50 %, rgba(255, 255, 255, 0,4) 50 %);
  Hintergrundgröße: 210 % 100 %;
  Hintergrundposition: rechts unten;
  Höhe: 100%;
  Breite: 100 %;
  Position: absolut;
  oben: 0;
  unten: 0;
  rechts:0;
  links: 0;
  Rahmenradius: 50px;
  Übergang: alles 1en;
  -webkit-transition: alles 1en;
}

.Grün {
   Hintergrundbild: linearer Farbverlauf (nach rechts, #25aae1, #40e495);
   Kastenschatten: 0 4px 15px 0 rgba (49, 196, 190, 0,75);
}

.lila {
   Hintergrundbild: linearer Farbverlauf (nach rechts, #6253e1, #852D91);
   Kastenschatten: 0 4px 15px 0 rgba (236, 116, 149, 0,75);
}

  .purple:hover:vor {
  Hintergrundposition: links unten;
}

.grün:hover:vor {
  Hintergrundposition: links unten;
}

<div id="glänzender Schatten">
  <button><span>Bewegen Sie den Mauszeiger über mich</span></button>
</div>

#glänzender-Schatten {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Höhe: 100vh;
  Hintergrund: #1c2541;
}

Taste {
  Rand: 2px durchgehend weiß;
  Hintergrund: transparent;
  Texttransformation: Großbuchstaben;
  Farbe: weiß;
  Polsterung: 15px 50px;
  Gliederung: keine;
  Überlauf: versteckt;
  Position: relativ;
}

Spanne {
  Z-Index: 20;  
}

Schaltfläche:nach {
  Inhalt: '';
    Anzeige: Block;
    Position: absolut;
    oben: -36px;
    links: -100px;
    Hintergrund: weiß;
    Breite: 50px;
    Höhe: 125px;
    Deckkraft: 20%;
    transformieren: drehen (-45 Grad);
}

Schaltfläche:Hover:nach {
  links: 120 %;
  Übergang: alle 600 ms kubisch-bézier (0,3, 1, 0,2, 1);
   -webkit-transition: alle 600 ms kubischer Bézier (0,3, 1, 0,2, 1);
}

<div id="wird geladen-btn">
  <button><span>Bewegen Sie den Mauszeiger über mich</span></button>
</div>

#wird geladen-btn {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Höhe: 100vh;
}

Taste {
  Hintergrund: transparent;
  Rand: 0;
  Randradius: 0;
  Texttransformation: Großbuchstaben;
  Schriftstärke: fett;
  Schriftgröße: 20px;
  Polsterung: 15px 50px;
  Position: relativ;
}

Schaltfläche:vor {
  Übergang: alle 0,8 s kubisch-bézier (0,7, -0,5, 0,2, 2);
  Inhalt: '';
  Breite: 1%;
  Höhe: 100%;
  Hintergrund: #ff5964;
  Position: absolut;
  oben: 0;
  links: 0;
}

Schaltflächenspanne {
  Mix-Blend-Modus: Abdunkeln;
}

Schaltfläche:Hover:vor {
  Hintergrund: #ff5964;
  Breite: 100 %;
}