So erstellen Sie eine 3D -Taste mit CSS

Die grafische Oberfläche einer Webseite spielt eine wichtige Rolle bei der Qualität einer Website oder einer Webanwendung. Um die Benutzerfreundlichkeit zu erhöhen und die Schnittstelle attraktiv zu machen, werden viele Ideen praktiziert. Wie andere Elemente auf einer Schnittstelle gibt es auch einige Schaltflächen auf fast jeder anderen Webseite, die unterschiedliche Operationen ausführen. Eine der häufigsten Techniken zur Verbesserung der grafischen Anzeige einer Schnittstelle ist die Erstellung einer 3D.

Lassen Sie uns diskutieren, wie eine 3D -Schaltfläche erstellt und über das CSS -Styling zu einer Webseite hinzugefügt wird.

Erstellen einer 3D -Taste mit CSS

Fügen wir ein einfaches Beispiel für das Erstellen einer 3D -Taste in HTML mithilfe von CSS -Styling -Eigenschaften hinzu. Erstellen Sie zunächst ein Anker -Tag mit dem HREF -Attribut, das der “entspricht“JavaScript: void (0)Funktion zum Erstellen einer einfachen Klick -Schaltfläche:

= "JavaScript: void (0);"> Klicken Sie hier!

Das erstellte Tag enthält ein HREF -Attribut, das das enthältJavaScript: void (0)”Funktion. Diese Funktion ändert die Form des Cursors, wenn er auf die Taste gerichtet ist. Zwischen dem Öffnungs- und Schließen von Anker -Tags befindet sich der Text, der auf der Schaltfläche angezeigt wirdKlicken Sie hier”.

Jetzt ist es erforderlich, die einfache Taste durch die CSS-Styling-Eigenschaften zu stylen, um ein dreidimensionales Display zu erstellen:

Fügen Sie einige Textdekorationseigenschaften hinzu, damit der Text auf der Schaltfläche angezeigt wird:

Farbe: RGB (236, 234, 234);
Textdekoration: Keine;
Hintergrundfarbe: RGB (165, 16, 133);
Schriftfamilie: Georgia, "Times New Roman", Times, Serif;
Schriftgröße: 3em;
Bildschirmsperre;

Dann fügen Sie einige hinzu “Web -KitEigenschaften, um der Taste Schatteneffekte und Radius hinzuzufügen:

-Webkit-Border-Radius: 9px;
-webkit-box-shadow: 0px 9px 0px rgb (114, 19, 98), 0px 9px 25px RGBA (0, 0, 0, .7);
-Moz-Box-Shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px RGBA (0, 0, 0, .7);

Der Knopf sollte auch in Bezug auf seinen Bereich, den Rand und seine Polsterung usw. dekoriert werden:

Rand: 100px Auto;
Breite: 160px;
Text-Align: Mitte;
Polsterung: 4px;

Um der Schaltfläche beim aktiven oder geklickten Schaltschlag Schatteneffekte hinzuzufügen, gibt es ein CSS:aktiv”Selektor:

A: aktiv
-webkit-box-shadow: 0px 3px 0px rgb (102, 27, 96), 0px 3px 6px RGBA (0, 0, 0, .9);
-Moz-Box-Shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, .9);
Box-Shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px RGBA (0, 0, 0), .9);
Position: Relativ;
Top: 7px;

Das vollständige Code -Snippet zum Erstellen der Schaltfläche lautet wie folgt:

Farbe: RGB (236, 234, 234);
Textdekoration: Keine;
Hintergrundfarbe: RGB (165, 16, 133);
Schriftfamilie: Georgia, "Times New Roman", Times, Serif;
Schriftgröße: 3em;
Bildschirmsperre;
Polsterung: 4px;
-Webkit-Border-Radius: 9px;
-webkit-box-shadow: 0px 9px 0px rgb (114, 19, 98), 0px 9px 25px RGBA (0, 0, 0, .7);
-Moz-Box-Shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, .7);
Box-Shadow: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px RGBA (0, 0, 0, .7);
Rand: 100px Auto;
Breite: 160px;
Text-Align: Mitte;
A: aktiv
-webkit-box-shadow: 0px 3px 0px rgb (102, 27, 96), 0px 3px 6px RGBA (0, 0, 0, .9);
-Moz-Box-Shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, .9);
Box-Shadow: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px RGBA (0, 0, 0), .9);
Position: Relativ;
Top: 7px;

Nach dem Ausführen des oben genannten Codes lautet wie folgt die Ausgabe:

Dies fasst die Methode zusammen, um eine 3D -Taste mit CSS zu erstellen.

Abschluss

Erstellen einer klickbaren 3D -Schaltfläche über die CSS -Styling -Eigenschaft erfordert zuerst eine einfache Schaltfläche über ein HTML. Dadurch sieht der Knopf dreidimensional aus. Um die Effekte zur Schaltfläche für die Instanz hinzuzufügen, wenn die Schaltfläche klickt oder aktiv ist.