Tasten nur mit CSS
Vorsicht
Dieser Artikel wurde mehr als vor einem Jahr veröffentlicht, Es gab Entwicklungen können.
Bitte berücksichtigen Sie dies.
Im heutigen Artikel werden wir sehen, wie eine einfache Form drehen, mit einem Knopf in einer ebenso einfachen Form mit einer formatierten Taste unformatiert. Alle Farben, Farbverläufe und Schatten werden “gebaut” über die CSS-Regeln für die Version 3. Diese wenigen einfachen Regeln sind einige nehmen’ mit einer Zange, weil sie funktionieren perfekt mit dem Browser auf Webkit (Safari, Konquerror, iPad / iPhone) E Gecko (Firefox e simili), aber sie nutzlos auf allen Versionen von Internet Explorer vor sind 9.
Beginnen wir mit dem HTML starten. Wir werden auch die Datei verbinden “style.css”:
<html>
<Leiter>
<link rel ="Stylesheet" href ="style.css" type ="text / css" charset ="UTF-8" />
</Leiter>
<Körper>
<bilden action ="#">
<Tisch>
<tr>
<td>Name:</td><td><input type ="Text" name ="Name" Wert =""></td>
</tr>
<tr>
<td>Post:</td><td><input type ="Text" name ="Mail" Wert =""></td>
</tr>
<tr>
<td colspan ="2" align ="Zentrum"><id = Taste"Schaltfläche">Senden</Schaltfläche></td>
</tr>
</Tisch>
</Form><!--Ende Form ->
</Körper>
</html>
Ohne die Formatierung von CSS gegeben wäre dies die Folge sein “Knoten und Rohöl”.
1. Home Style
Wir beginnen in unserem eingeben “style.css” die folgenden Zeilen Code, um Stil, um die Taste zu geben:
Schaltfläche{
Breite: 100px;
umreißen: keine;
Cursor: Zeiger;
text-align: Zentrum;
text-decoration: keine;
sind: bold 12px Arial, Helvetica, sans-serif;
Farbe: #fff;
padding: 10px 20px;
Grenze: solid 1px # 0076a3;
Hintergrund: #0095cd;
}
Inzwischen geben wir eine feste Größe, allineamo Text in der Mitte ohne Dekorationen, es ist die Schriftart eingestellt (sind), die Farbe (Farbe) und die Abstände von den anderen Elementen (padding). Dann setzen wir die Hintergrundfarbe der Schaltfläche und die Farbe des Rahmens. Dies ist das Ergebnis:
2. Hintergrund mit Farbverlauf
Wir könnten dann einen Farbverlauf auf der Hintergrundfarbe, eine dreidimensionale geben. Wir fügen Sie die folgenden Zeilen an dem Element “Schaltfläche” die nostro “style.css”:
Hintergrund: -webkit-gradient(linear, links oben, links unten, von(#00Dienstleistungen), zu(#0078a5)); Hintergrund: -webkit-linear-gradient(top, #00Dienstleistungen, #0078a5); Hintergrund: -moz-linear-gradient(top, #00Dienstleistungen, #0078a5); Hintergrund: -ms-linear-gradient(top, #00Dienstleistungen, #0078a5); Hintergrund: -o-linear-gradient(top, #00Dienstleistungen, #0078a5);
Von diesen Linien gibt es wenig zu erklären,, fügen Sie einen vertikalen Verlauf in den Hintergrund. Dies ist das Ergebnis:
3. Abrunden der Ecken
Je nach Ihren Wünschen können wir wollen, um die Ecken der Schaltfläche runden. Wir fügen Sie die folgenden Zeilen an dem Element “Schaltfläche” die nostro “style.css”:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
Es kann nützlich sein, zu verstehen, wie diese Werte. Sie haben ein bisschen spielen’ das gewünschte Ergebnis zu finden. Unten ist das Ergebnis:
4. Schatten
Um den letzten Hauch von Dreidimensionalität zu geben ist notwendig, um eine leichte Schattierung. Wir fügen diese letzten Zeilen Element “Schaltfläche” die nostro “style.css”:
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5);
Dies ist das Ergebnis:
Und jetzt haben wir eine Schaltfläche mit einem Stil, den Sie müssen nur die klassische Wirkung auf Maus-Set und klicken Sie auf. Die folgenden Zeilen zu der Datei hinzufügen “style.css”:
Schaltfläche:schweben {
Hintergrund: #0095cd;
Hintergrund: -webkit-gradient(linear, links oben, links unten, von(#0078a5), zu(#00Dienstleistungen));
Hintergrund: -webkit-linear-gradient(top, #0078a5, #00Dienstleistungen);
Hintergrund: -moz-linear-gradient(top, #0078a5, #00Dienstleistungen);
Hintergrund: -ms-linear-gradient(top, #0078a5, #00Dienstleistungen);
Hintergrund: -o-linear-gradient(top, #0078a5, #00Dienstleistungen);
Hintergrund: linear-gradient(top, #0078a5, #00Dienstleistungen);
}
Schaltfläche:aktiv{
Position: relativen;
top: 1px;
}
Und dies ist das Ergebnis der Ausführung:
0 Kommentare