CSS-Web-Button-Design: Erstellen Sie eine Vielzahl cooler Button-Stile

CSS-Web-Button-Design: Erstellen Sie verschiedene coole Button-Stile, spezifische Codebeispiele sind erforderlich

Im Webdesign sind Buttons ein sehr wichtiges Element, da sie nicht nur die Verbindung zwischen Benutzern und der Website herstellen, sondern auch die erhöhen Gesamtvisuelle Wirkung und Benutzererfahrung. Ein guter Button-Stil muss nicht nur ein ansprechendes Aussehen haben, sondern auch einige funktionale Details berücksichtigen, wie z. B. Klickeffekte, Hover-Effekte usw. In diesem Artikel werden einige CSS-Schaltflächendesigntechniken und coole Stile vorgestellt und Codebeispiele bereitgestellt. Wir hoffen, Ihnen dabei zu helfen, Schaltflächen besser zu entwerfen und Websites und Anwendungen mehr Kreativität zu verleihen.

1. Grundlegende CSS-Schaltfläche

Werfen wir zunächst einen Blick auf den grundlegendsten CSS-Schaltflächenstil:

HTML-Code:

<button class="btn">Click me</button>  

CSS-Stil:

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn:hover {
  background-color: #3e8e41;
}

Diese Schaltfläche hat einen grünen Hintergrund, weißen Text und einen abgerundeten Rand. Wenn Sie mit der Maus über die Schaltfläche fahren, ändert sich die Hintergrundfarbe in Dunkelgrün, wodurch ein einfacher Hover-Effekt erzielt wird. Dieser Schaltflächenstil kann grundsätzlich auf die meisten Szenarien angewendet werden.

2. 3D-Stereoskopeffekt-Schaltfläche

Lassen Sie uns eine 3D-Stereoskopeffekt-Schaltfläche erstellen:

HTML-Code:

<button class="btn-3d">Click me</button>

CSS-Stil:

.btn-3d {
    border: none;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    margin: 20px;
    padding: 10px 20px;
    position: relative;
    text-align: center;
    text-shadow: rgba(0,0,0,.4) 1px 1px;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
    background: linear-gradient(to bottom, #556270 0%,#616161 100%);
    background-color: #556270;
}

.btn-3d:before,
.btn-3d:after {
    border: none;
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    height: 4px;
    width: 100%;
    transform-style: preserve-3d;
    transition: all .3s ease-out;
}

.btn-3d:before {
    background: #BD3F32;
    transform: translateZ(-1px);
    box-shadow: 0 0 8px rgba(189,63,50,.7);
}

.btn-3d:after {
    background: #3F7FBC;
    transform-origin: left;
    transform: rotateY(90deg) translateZ(-1px);
    box-shadow: 0 0 8px rgba(63,127,188,.7);
}

.btn-3d:hover {
    background: linear-gradient(to bottom, #BD3F32 0%,#616161 100%);
    transform: translateZ(-6px);
    text-shadow: none;
    box-shadow: 0 0 8px rgba(0,0,0,.5);
}

.btn-3d:hover:before {
    transform: translateZ(-13px) rotateY(60deg);
}

.btn-3d:hover:after {
    transform: rotateY(-60deg) translateZ(-13px);
    transition-delay: .05s;
}

Dieser Schaltflächenstil hat einen offensichtlichen stereoskopischen 3D-Erscheinungseffekt und einen Schwebezustand. Der Translations-/Rotationseffekt ist nicht vorhanden bringt nicht nur visuelle Auswirkungen auf den Benutzer, sondern erhöht auch das Benutzererlebnis.

3. Schaltfläche zum Ändern des Hintergrunds

Der folgende Schaltflächenstil bietet Benutzern bessere visuelle Hinweise durch die Änderung der Hintergrundfarbe:

HTML-Code:

<button class="btn-change">Click me</button>

CSS-Stil:

.btn-change {
    cursor: pointer;
    display: inline-block;
    margin: .5rem;
    padding: .75rem 1.5rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.btn-change:before {
    border-right: 1px solid white;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skew(-15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:before {
    width: 100%;
    transition: all .3s ease;
}

.btn-change:after {
    border-left: 1px solid white;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(15deg) scaleY(1.4);
    width: 0;
}

.btn-change:hover:after {
    width: 100%;
    transition: all .3s ease;
    transition-delay: .15s;
}

Dieser Schaltflächenstil ist der Hintergrund Die Farbe ändert sich im Schwebezustand allmählicher, wodurch Benutzer besser visuell geführt werden können.

4. Schaltfläche mit Aushöhlungseffekt

Als nächstes erstellen wir einen sehr coolen Schaltflächenstil mit Aushöhlungseffekt:

HTML-Code:

<button class="btn-void">Click me</button>

CSS-Stil:

.btn-void {
    border: solid 2px #bada55;
    background: none;
    color: #bada55;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 24px;
    position: relative;
    transition: all .35s;
    overflow: hidden;
}

.btn-void:before,
.btn-void:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bada55;
    transition: all .35s;
}

.btn-void:before {
    height: 0%;
    width: 100%;
}

.btn-void:after {
    height: 100%;
    width: 0%;
}

.btn-void:hover,
.btn-void:focus,
.btn-void:active {
    border-color: #bada55;
    color: #fff;
}

.btn-void:hover:before,
.btn-void:focus:before,
.btn-void:active:before {
    height: 100%;
}

.btn-void:hover:after,
.btn-void:focus:after,
.btn-void:active:after {
    width: 100%;
}

Das Merkmal dieses Schaltflächenstils ist, dass im Hover-Zustand die Umgebungsbereich der Schaltfläche Ein weißer Rand wird angezeigt, der rechteckige Bereich innerhalb der Schaltfläche wird weiß und der Schaltflächentext wird grün. Bei der allgemeinen Erholung kommt es zu einem Gradienteneffekt.

5. Schaltfläche „Laden“

Schauen wir uns abschließend einen Schaltflächenstil mit Ladestatus an:

HTML-Code:

<button class="btn-loading">Submit</button>

CSS-Stil:

.btn-loading {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  position: relative;
}

.btn-loading:after {
  content: "";
  position: absolute;
  top:50%;
  left: 50%;
  border: 6px solid #e6e6e6;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  border-top-color: #3498db;
  animation: spin 2s linear infinite;
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn-loading.loading:after {
  display: block;
}

Das Merkmal dieses Schaltflächenstils ist, dass nach dem Klicken auf die Schaltfläche „Senden“ die Schaltfläche angezeigt wird Der Inhalt wird ausgeblendet und eine rotierende Animation wird angezeigt, um den Benutzer daran zu erinnern, dass er geladen wird. Der Gesamteffekt ist relativ intuitiv.

Zusammenfassung

Durch die Einführung der oben genannten fünf Schaltflächenstile können wir deutlich erkennen, dass eine gute Schaltfläche nicht nur attraktive visuelle Effekte benötigt, sondern auch auf einige funktionale Details achten muss, wie z. B. Änderungen im Schwebezustand Klickinteraktionen usw. Die in diesem Artikel bereitgestellten Schaltflächenstile basieren alle auf CSS und können problemlos in tatsächlichen Projekten angewendet werden. Beim Schreiben von Webseiten können Sie der Implementierung einiger Spezialeffekte mehr Aufmerksamkeit schenken und Schaltflächen erstellen, die Ihren Anforderungen besser entsprechen.

Das obige ist der detaillierte Inhalt vonCSS-Web-Button-Design: Erstellen Sie eine Vielzahl cooler Button-Stile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!