CSS zum Erzielen eines leuchtenden Schaltflächeneffekts (Codebeispiel)

Wir verwenden häufig Schaltflächeneffekte. In diesem Artikel teilen wir Ihnen die Implementierung eines schönen Schaltflächeneffekts mit.

Schauen wir uns ohne Umschweife direkt den Code an

Der folgende Code ist der Grundcode für alle nachfolgenden Schaltflächenstile:

HTML

<a class="button" href="#">Button</a>

CSS

.button {
width:80px;
height:20px;
  display: block;  
  padding: 1em 3.2em;  
  border-radius: 1.6em;  
  color: #fff;  
  font-size: 18px;  
  font-family: 'Lato', sans-serif;  
  font-weight: 700;  
  text-align: center;  
  text-decoration: none;
  }

Was sich bei den Tasten 1 bis 4 unten ändert, ist die Grundfarbe, und die Farbdurchlässigkeit des Tastenkörpers wird ebenfalls durch Box-Shadow angepasst, um den für jede Taste verwendeten Schatten zu beschreiben. Beginnen Sie mit der Gestaltung von Schaltflächen mit Verlaufseffekten ab Schaltfläche 5. Schauen wir uns die spezifische Code-Implementierung an.

Taste1:

.button {
  background-color: rgba(252, 28, 143, 1);  
  box-shadow: 0 5px 20px rgba(252, 28, 143, .5);
}

Der Effekt ist wie folgt:

Taste2:

.button{
background-color: rgba(251, 152, 11, 1);  
box-shadow: 0 5px 20px rgba(251, 152, 11, .5);
}

Der Effekt ist wie folgt :

Taste3:

.button {
  background-color: rgba(241, 196, 15, 1);  
  box-shadow: 0 5px 20px rgba(241, 196, 15, .5);
}

Der Effekt ist wie folgt:

Taste4 :

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5);
}

Der Effekt wie folgt:

button5:

Das grundlegende Erscheinungsbild ist „button4“, Box-Shadow Ändert die Position des unten angehängten Schattens durch Setzen des Schattens.

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 0 40px rgba(0, 63, 255, .7);
}

Der Effekt ist wie folgt:

button6:

Dies ist der Box-Schatten, den wir an der Position „button4“ hinzufügen angegeben durch Einschub.

.button {
  background-color: rgba(0, 63, 255, 1);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5), 0 0 40px rgba(255, 255, 255, .5) inset;
}

Der Effekt ist wie folgt:

Taste7: ​​

Verwenden Sie die Schaltfläche „Verlaufstyp“, um verschiedene Farben zu kombinieren und stellen Sie den Winkel ein.

.button {
  background: linear-gradient(-45deg, rgba(87, 225, 181, 1) 0%, rgba(0, 63, 255, 1) 100%);  
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5);
}

Der Effekt ist wie folgt:

Weitere weitere spannende Inhalte finden Sie unter das Video-Tutorial auf der chinesischen PHP-Website Die Spalten CSS Video Tutorial und CSS3 Video Tutorial in der Spalte! ! !

Das obige ist der detaillierte Inhalt vonCSS zum Erzielen eines leuchtenden Schaltflächeneffekts (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!