Knöpfe auf dem modernen Design von CSS. Einführung in die Grundlagen der modernen CSS-Tasten

Ich habe einige CSS-Tasten ausgewählt, die meiner Meinung nach in Webprojekten verwendet werden können.

CSS3 Buttons Generator.

Schau dir den Generator an CSS3-Tasten von Sanwebe:

Rosa CSS3-Taste mit Pacifico-Schrift

Süße rosa Knopf ( abgesehen von einem kleinen JQuery-Code, um Musik zu spielen und den internen Text zu ändern) Vollständig erstellt basierend auf CSS3:


Sammlung von 3D-Tasten

Eine Sammlung von 3D-Schaltflächen, die mit CSS3 erstellt wurden:


Soziale 3D-Buttons.

Ausgezeichnet soziale KnöpfeMit CSS3 und Schrift für Symbole abgeschlossen:


Animierte CSS3-Buttons.

Animierte CSS-Tasten mit Hintergrundmustern. Funktioniert möglicherweise nicht in Firefox 3.6- und IE10-Browsern:


Runde animierte CSS3-Tasten

Weitere animierte Tasten, in denen die Drehung des Textes beim Schweben der Maus einen wirklich attraktiven Effekt gibt:


Clean Circle-Tasten

Hier ist ein weiteres Beispiel der kreisförmigen CSS3-Tasten:


CSS3-Switches-Schaltflächen

Gut gemacht, die mit CSS3- und Font-Symbolen erstellt wurden:


Animierte CSS3-Taste.

Nette dreidimensionale Taste mit CSS3 und Google-Schriftarten erstellt:


Effekte von CSS3-Tasten

Diese Tasten zeigen Animationen mit verschiedenen Eigenschaften von CSS3:


Glossy CSS3-Buttons.

Jetzt können Sie absolut sicher sein, dass die glänzenden Tasten einfach mit CSS3 erstellt werden können, nicht mehr Photoshop:


Dreidimensionale CSS3-Tasten

Es ist überraschend, dass Sie mit Hilfe von Pseudo-Elementen CSS3: vorher und: After tun können. Bewerten Sie die auffälligen dreidimensionalen Tasten:


Wechseln Sie CSS3.

Ein Beispiel für einen Switch-Taster auf CSS3 ohne Verwendung von Javascript:


Der Effekt einer dreidimensionalen Roll-Up-Taste

Der Effekt von dreidimensionalem Drehen, wenn die Schaltfläche von CSS3 gedrückt wird:


Brand Buttons.

Schöne CSS-Knöpfe von beliebten Marken mit Bootstrap-Symbolen:


Dunkler runder Knopf

Runder Knopf mithilfe von JQuery, um einen Drop-Effekt beim Drücken der Taste zu geben:


Wechseln Sie CSS3.

Schalter erstellt mit CSS3:


Schöne flache Buttons.

Sammlung von flachen CSS-Tasten für alle Anlässe, ohne Animation und Effekte:


Zugriffsbuttons der sozialen Netzwerke

Attraktivere Version von Buttons allgemeiner Zugang.aber ohne funktional. Nach Angaben des Entwicklers müssen Sie in IE7 + arbeiten:


Weihnachtstasten

Christmas CSS-Taste mit Daten: URLs - Methode zum Einbetten von Bildern direkt in das Dokument:


Weicher Knopf

Runder glänzender Knopf mit CSS3 erstellt:


Soft-Taste Soft-Taste

Schaltflächen Verwenden Sie nur Unicode-Zeichen, mit denen Sie Text oder Abflüsse verwenden können:


Große dreidimensionale animierte CSS3-Tasten

Ein weiterer Satz von dreidimensionalen animierten CSS-Tasten für Websites. Animation erfolgt mit den Eigenschaften der Animation und Keyframes:


CSS3-Tasten aus Metall.

Sammlung von Metall-CSS3-Tasten, Zeichen, auf denen sich die Pictos-Schriftart mit @ font-face erstellt haben. Für den Metall-Effekt waren die Eigenschaften des Kastenschattens und des Lineargradienten beteiligt:


Runde CSS3-Buttons.

Eine weitere Sammlung von runden animierten Schaltflächen auf CSS3:


CSS3 Social Network-Tasten mit Presse

Schaltflächen Verwenden Sie einfache CSS3-Eigenschaften, z. B. Gradienten, Kastenschatten, Textschatten und so weiter. Der Status von "Warten" und "Aktiv" ist auch in diesem Set enthalten:


Einfache CSS3-Buttons.

Schöne CSS-Button:


Dreidimensionale Download-Taste

Diese dreidimensionale Taste verwendet die perspektivische Transformation. Es funktioniert nur in Webkit-basierten Browsern:


Straßing CSS3 Social Network Buttons


Großer Knopf

Feste glänzende CSS3-Taste mit Schatteneffekt unten. Die Schaltfläche verwendet eine Schriftart namens Sansita One aus der Google Collection:


Einfache Tasten

Etwas einfache CSS. Tasten:


CSS3-Button Soziale Netzwerke


Einfache CSS-Schaltflächen

Ein Satz unkomplizierter CSS-Schaltflächen. Sie sind einfach zu konfigurieren und zu verwenden. Sie können leicht in die Schrift-Tief- oder andere Bibliothek integriert werden:


Tasten in Form eines Pokerchips

Ein Beispiel für eine einfache Taste in Form eines Pokerspiels. Es kann auch als Button mit einem Führungseffekt verwendet werden:


Slider-Taste

Konzept CSS-Slider-Tasten:


Administrator-Menü-Schaltflächen

Administratorfeld ( menü oder Navigation.) Mit CSS3- und Fontawesome-Framework. Beim Umschalten auf die Schaltfläche wird die aktive Klasse mithilfe von JQuery hinzugefügt:


Eine genähte Button.

Einfache Schaltfläche mit Zeile, demonstriert CSS3-Funktionen ohne Hintergrundbild:


Taste rotierender Knopf

Runder Knopf mit einer rotierenden Grenze für den Mauszeiger-Anweisungsanzeige:


Schaltfläche auf CSS3.

Die von CSS3 erstellte Soft-Taste basierend auf diesem Beispiel:


CSS3-Taste mit erweiterter Karte

Diese CSS-Tasten sehen aus wie Karten, die aus der Hülse rutschen. Sie können verwendet werden, um Informationen anzuzeigen, die ausgeblendet werden müssen, bis der Benutzer auswählt:


CSS3-Animationsschaltflächen in Form von Süßigkeiten

Animationstaste, um den Download-Status anzuzeigen:


CSS3-Switches.

Wunderschöne Schalter, die Jquery zur Schalterklasse verwenden:


Glänzende Knöpfe

Set schöne Schaltflächen für CSS-Site. Verschiedene Eigenschaften werden verwendet, um einen dreidimensionalen glänzenden Typ zu ergeben:


Zuerst müssen Sie Quellen herunterladen und das Display-Thema für Schaltflächen auswählen. Sie können das Design nehmen, das Sie genießen werden. Zum Beispiel nehmen wir das erste Thema Winona.

Herunterladen

Verwandte Artikel zu diesem Thema:

Öffnen Sie die Datei im Editor index.html. Von der Quelle finden wir den Tag von Interesse für uns. In meinem Fall:

Nehmen Sie aus diesem Code eine Zeichenfolge mit einer Klasse taste..

Fügen Sie den Code mit einem beliebigen Speicherort in der Datei mit unserem Projektcode zwischen dem Tag ein .
Knopfname wechselt in den gewünschten Sie. In meinem Fall ändere ich den Namen in "Öffnen"

Kopieren Sie es und setzen Sie sich zwischen Tags ein In der Indexdatei Ihres Projekts.

Aus dem Beispiel ist ersichtlich, dass eine bestimmte Schaltfläche mithilfe der zusätzlichen Klasse des entsprechenden Titel-Designs hinzugefügt wird.

In unserem Fall diese Klasse button-Winona.. Daher wird ein Styles mit dem Namen Winona hinzugefügt.

Es ist sehr praktisch, weil Wenn Sie das Design der Schaltflächen ändern möchten, müssen Sie nur den Namen der zusätzlichen Klasse im Tag ersetzen

Es stellte sich ziemlich hübsch heraus (Abb. 3), aber es gibt auch explizite Unterschiede Aus der ersten Taste - es sieht flach aus, wie ein Brett.

Feige. 3. Sehen Sie sich die Taste mit Farbverlauf an

Sie können den Knopf mit der gewünschten Form erneut den Gradienten machen, "spielt" mit Blumen. Zwei Werte des Gradienten tun nicht mehr, glücklicherweise bieten Firefox und Safari eine Lösung.

hintergrund: -Moz-Linear-Gradient (# D0ecf4, # 5bc9e1, # d0ecf4);

Setzen Sie anstelle von zwei Werten die gewünschte Anzahl von Farben ein, der Gradient bewegt sich glatt von einer Farbe zum anderen.

Chrome, Safari.

hintergrund: -Webkit-Gradient (linear, 0 0, 0 100%, von (# d0ecf4), zu (# d0ecf4), farbstopp (0,5, # 5bc9e1));

Der Parameter Color-Stopp gibt den Anwendungspunkt der neuen Farbe an. Der Wert variiert von 0 bis 1.

Beispiel 2. Knöpfe mit einem verbesserten Gradienten

HTML 5 CSS 2.1 CSS 3 IE 9 CR OP OP SA FX

Tasten

Das Ergebnis des Beispiels ist in Fig. 2 gezeigt. vier.

Feige. 4. Gradient, was ist der Gradient?

In ähnlicher Weise können Sie andere Gradienten auf der Taste oder eines anderen Elements erstellen (Abb. 5). Dies ist jedoch bereits alleine gemacht, denn was der Workshop hinzugefügt hat.

Feige. 5. Solche unterschiedlichen Tasten

Ich werde zusammenfassen. Sie können einen Knopf mit einem Farbverlauf und abgerundeten Ecken ohne Bilder erstellen. Mit Browsern gibt es jedoch ein Zusammenbruch und Zettel. Opera weiß nicht, wie man mit Gradienten zusammenarbeitet, in IE 9 gibt es einen unangenehmen Fehler mit einer Kombination eines Gradienten mit Ecken (Abb. 6).

Feige. 6. Überlagerungshintergrund an Ecken in IE 9

Nun, solange wir "schöne" für firefox-Browser., Safari und Chrom.

Fortsetzung des Themas:
Os

Ich habe einen Web-Service, den ich überregte, den ich als "Link zum Service hinzufügen" registriert habe, für den HTTPS erforderlich ist, und Zertifikat. Unten ist mein Code zum Erstellen einer Instanz ...