CSS Buttons: Tutorials und Beispiele
Erstellen von Schaltflächen mit CSS ist eine der am meisten experimentierten mit Web-Design-Techniken um. Beispiele und Tutorials sind reichlich vorhanden.
Der größte Trend in der letzten Zeit beim Entwurf von CSS-Schaltflächen scheint die Beseitigung von Bildern, insbesondere Hintergrundbildern, von Schaltflächen zu sein. Aber es gibt viele andere Dinge, die Designer mit Knöpfen machen, einige mit Bildern.
Im Folgenden haben wir mehr als zwanzig Tutorials, Beispiele und Tools zum Erstellen von CSS-Schaltflächen zusammengestellt, von denen die meisten CSS3 verwenden.
Enthalten sind Tasten für praktisch jeden Design-Stil. Wir haben versucht, uns hier auf neuere Techniken zu konzentrieren und die althergebrachten Techniken (wie die Schiebetür-Methode für abgerundete Ecken), mit denen die meisten Designer bereits vertraut sind.
Wenn Sie andere Tutorials oder Beispiele haben, die Sie teilen möchten, tun Sie dies bitte in den Kommentaren!
Tutorials und Artikel
Das Button-Element neu entdecken
Ein wirklich hilfreicher Artikel, der das Thema diskutiert button Element in CSS, das von Designern oft übersehen wird. Es ist ein bisschen älter, aber hat immer noch viele nützliche Informationen zum Erstellen von stilvollen Schaltflächen mit CSS.
Schöne CSS-Tasten mit Icon-Set
Hier ist ein weiterer Artikel, in dem es darum geht, Schaltflächen mit Symbolen zu erstellen span Klassen statt der button Element.
Erstellen Sie kick-ass praktische CSS3-Tasten
Dieses Video-Tutorial von Nettuts + zeigt, wie man praktische CSS3-Buttons erstellt, die sogar ein Twitter-Vogel-Icon-Bild enthalten, aber tatsächlich komplett mit CSS3 erstellt wurden.
Schöne Photoshop-ähnliche Tasten mit CSS3
Obwohl die Schaltflächen hier nicht besonders zukunftsorientiert sind, ist es erstaunlich, dass sie vollständig mit CSS3 erstellt wurden, ohne Bilder zu verwenden, und nur auf Schaltflächen basieren, die in Photoshop erstellt wurden.
Bessere Interaktion zwischen Schaltflächen und Navigation
Dies ist ein großartiges, einfaches Lernprogramm von Darren Hoyt zum Erstellen besserer Verhaltensweisen für Ihre Schaltflächen, die Besucher dazu ermutigen, mit Ihrer Website zu interagieren.
Super tolle Buttons mit CSS3 und RGBA
Dieses Tutorial von Zurb behandelt die Verwendung von CSS3 und Alpha-Blending mit RGBA, um skalierbare Schaltflächen mit nur einem einzigen PNG-Bild zu erstellen.
Erstellen schöner Buttons mit CSS-Verläufen
Ein Tutorial zum Erstellen einer Schaltfläche unter Verwendung von CSS-Verläufen ähnlich denen von Mozilla für Firefox-Personas.
Wie man einen sexy Knopf mit CSS gestaltet
Dieses Tutorial zeigt, wie Sie eine große, lebendige Schaltfläche erstellen, ohne Bilder zu verwenden.
Realistisch wirkende CSS3-Buttons
Dies sind einfache Schaltflächen, die vollständig mit CSS3 erstellt wurden, einschließlich einiger Pseudo-Elemente.
Hübsche CSS3-Tasten
In diesem Tutorial wird gezeigt, wie Sie eine einfache, leicht glänzende Schaltfläche erstellen, die skalierbar ist und in jeder Farbe ohne Bilder erstellt werden kann.
CSS3-Tasten ohne Bilder
Ein einfaches Tutorial zum Erstellen dynamischer Schaltflächen, die nur CSS3 und keine Bilder verwenden. Es gibt vier Zustände für jede Schaltfläche, einschließlich deaktivierter, verschobener und angeklickter Zustände.
5 verschiedene Tutorials von dynamischen CSS runden Ecken Buttons
Dies ist eine Sammlung von fünf verschiedenen Tutorials zum Erstellen von CSS-Buttons mit abgerundeten Ecken. Zwei enthalten die Verwendung von Bildern, die anderen drei nicht.
Erstellen Sie eine CSS3-Schaltfläche, die sich leicht verschlechtert
Bis alle Browser CSS3 korrekt unterstützen, werden wir Probleme bekommen, wenn wir Dinge wie Buttons benutzen. Dieses Tutorial zeigt, wie man großartige CSS3-Buttons erstellt, die auch in älteren Browsern wie IE6 und 7 gut aussehen.
Apples Navigationsleiste verwendet nur CSS
In diesem Tutorial wird gezeigt, wie Sie das Navigationsmenü im Schaltflächenstil auf der Apple-Website neu erstellen. Es funktioniert am besten in Safari 3+, sieht aber in anderen Browsern immer noch gut aus.
Erstellen Sie eine CSS3-Aktionskontaktschaltfläche
In diesem Tutorial wird gezeigt, wie Sie eine Call-to-Action-Schaltfläche vollständig mit CSS erstellen, die verschiedene Standard- und Hover-Zustände enthält.
Sexy Tasten mit CSS3
Dieses einfache Tutorial zeigt, wie man schön gestaltete Schaltflächen mit eindeutigen Hover- und aktiven Zuständen erstellt. Die Tasten können skaliert werden und ihre Farbe kann leicht geändert werden.
Glossy Buttons ohne Bilder mit nur CSS3
Wenn man sich diese Knöpfe ansieht, ist es schwer zu glauben, dass sie ohne Bilder gemacht werden, wenn man nicht genau hinsieht. Der Code ist kompliziert, aber das Endergebnis sieht gut aus, komplett mit Hover-Effekt.
CSS3-Schaltflächen mit Symbolen
Dieses Tutorial zeigt, wie CSS3-Schaltflächen mit Farbverläufen erstellt werden, die auch Symbolbilder enthalten und browserübergreifend kompatibel sind.
Rollen Sie Ihre eigenen Google-Schaltflächen
In diesem Tutorial wird gezeigt, wie skalierbare Schaltflächen im Google-Stil mit farbigen Rahmen erstellt werden. Die Endergebnisse sind minimalistisch und sauber.
Beispiele und Werkzeuge
10 tolle CSS3-Buttons zur Verwendung auf Ihrer Website
Hier ist eine Sammlung von zehn Schaltflächen, die Sie auf Ihrer Website verwenden können. Sie sind alle ziemlich einfach, aber nur mit CSS3 ohne Bilder erstellt.
CSS3-Farbverlaufsknöpfe
Dies ist eine riesige Sammlung von CSS3-Schaltflächen von Web Designer Wall. Enthalten sind eine Vielzahl von Formen, Größen und Farben, alle mit Farbverläufen. Eine der besten Seiten über sie ist jedoch, wie elegant diese Schaltflächen in Browsern, die keine volle CSS3-Unterstützung haben, beeinträchtigt werden.
Knopfmacher
CSS-Tricks bietet diesen kostenlosen CSS3 Button Creator. Definieren Sie einfach die Hintergrundfarben für jeden Status der Schaltfläche, die Größe und die Textattribute, und es wird den CSS-Code für Sie erstellen.
Radioaktive Tasten
Diese Schaltflächen verwenden CSS-Animationen in Safari, um einen pulsierenden, leuchtenden Effekt zu erzeugen. In anderen Browsern, die CSS3 unterstützen, sind sie immer noch perfekt funktional und sehen gut aus.
Kennen Sie andere Techniken zum Erstellen von tollen CSS-Buttons, die hier nicht erwähnt wurden? Oder haben Sie ein Lieblingsbeispiel? Bitte teilen Sie sie in den Kommentaren!