CSS-Schaltflächen: Tutorials und Beispiele

Das Erstellen von Schaltflächen mit CSS ist eine der am häufigsten eingesetzten Webdesign-Techniken überhaupt. Beispiele und Tutorials gibt es in Hülle und Fülle. Der größte aktuelle Trend beim Design von CSS-Schaltflächen scheint darin zu bestehen, Bilder, insbesondere Hintergrundbilder, aus Schaltflächen zu entfernen. Aber es gibt noch viele andere Dinge, die Designer mit Schaltflächen machen, einige davon enthalten Bilder. Nachfolgend haben wir mehr als zwanzig Tutorials, Beispiele und Tools zum Erstellen von CSS-Schaltflächen zusammengestellt, von denen die meisten CSS3 verwenden. Im Lieferumfang sind Knöpfe enthalten, die zu praktisch jedem Designstil passen. Wir haben versucht, uns hier auf neuere Techniken zu konzentrieren und die altbewährten Techniken (wie die Schiebetürmethode zum Erstellen abgerundeter Ecken), mit denen die meisten Designer bereits vertraut sind. Wenn Sie weitere Tutorials oder Beispiele haben, die Sie teilen möchten, schreiben Sie dies bitte in die Kommentare!

Tutorials und Artikel

Das Knopfelement neu entdecken

Ein wirklich hilfreicher Artikel über das Schaltflächenelement in CSS, das von Designern oft übersehen wird. Es ist etwas älter, enthält aber immer noch jede Menge nützliche Informationen zum Erstellen stilvollerer Schaltflächen mit CSS.

Schöne CSS-Schaltflächen mit Icon-Set

Hier ist ein weiterer Artikel, in dem es darum geht, Schaltflächen mit Symbolen zu erstellen, allerdings unter Verwendung von Span-Klassen anstelle des Schaltflächenelements.

Inhaltsverzeichnis

Erstellen Sie umwerfend praktische CSS3-Schaltflächen

Dieses Video-Tutorial von Nettuts+ zeigt, wie man praktische CSS3-Schaltflächen erstellt, die sogar etwas enthalten, das wie ein Twitter-Vogelsymbol aussieht, in Wirklichkeit jedoch vollständig mit CSS3 erstellt wurde.

Wunderschöne Photoshop-ähnliche Schaltflächen mit CSS3

Obwohl die Schaltflächen hier optisch nicht besonders zukunftsweisend sind, ist das Erstaunliche, dass sie vollständig mit CSS3 erstellt wurden, ohne Bilder zu verwenden, und nur auf in Photoshop erstellten Schaltflächen basierten.

Bessere Tasten- und Navigationsinteraktionen

Dies ist ein großartiges, einfaches Tutorial von Darren Hoyt zum Erstellen besserer Verhaltensweisen für Ihre Schaltflächen, die Besucher zur Interaktion mit Ihrer Website ermutigen.

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 Sie schöne Schaltflächen mit CSS-Verläufen

Ein Tutorial zum Erstellen einer Schaltfläche mit CSS-Verläufen, die denen ähneln, die Mozilla für Firefox Personas verwendet.

So entwerfen Sie einen sexy Button mit CSS

Dieses Tutorial zeigt, wie Sie eine große, lebendige Schaltfläche erstellen, ohne Bilder zu verwenden.

Realistisch aussehende CSS3-Schaltflächen

Hierbei handelt es sich um einfache Schaltflächen, die vollständig mit CSS3 erstellt wurden und einige Pseudoelemente enthalten.

Hübsche CSS3-Schaltflächen

Dieses Tutorial zeigt, wie Sie eine einfache, leicht glänzende Schaltfläche erstellen, die skalierbar ist und in jeder Farbe ohne Bilder erstellt werden kann.

CSS3-Buttons 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, schwebender und angeklickter Zustände.

5 verschiedene Tutorials zu dynamischen CSS-Linkschaltflächen mit runden Ecken

Dies ist eine Sammlung von fünf verschiedenen Tutorials zum Erstellen von CSS-Schaltflächen mit abgerundeten Ecken. Zwei beinhalten die Verwendung von Bildern, die anderen drei jedoch nicht.

Lesen:  Was ist das virtuelle Bildungssystem von lms(3)?

Erstellen Sie eine CSS3-Schaltfläche, die sich gut verschlechtern lässt

Bis alle Browser CSS3 ordnungsgemäß unterstützen, werden wir Probleme haben, wenn wir damit Dinge wie Schaltflächen erstellen. Dieses Tutorial zeigt, wie Sie tolle CSS3-Schaltflächen erstellen, die auch in älteren Browsern wie IE6 und 7 gut aussehen.

Apples Navigationsleiste verwendet nur CSS

Dieses Tutorial zeigt, 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-Call-to-Action-Schaltflä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 Buttons mit CSS3

Dieses einfache Tutorial zeigt, wie Sie schön gestaltete Schaltflächen mit einzigartigen Hover- und Aktivzuständen erstellen. Die Schaltflächen sind skalierbar und ihre Farbe lässt sich einfach ändern.

Glänzende Schaltflächen ohne Bilder, die nur CSS3 verwenden

Wenn man sich diese Schaltflächen ansieht, kann man kaum glauben, dass sie ohne Bilder erstellt wurden, es sei denn, man schaut genau hin. Der Code ist kompliziert, aber das Endergebnis sieht großartig aus, komplett mit Hover-Effekt.

CSS3-Schaltflächen mit Symbolen

Dieses Tutorial zeigt, wie Sie CSS3-Schaltflächen mit Farbverläufen erstellen, die auch Symbolbilder enthalten und browserübergreifend kompatibel sind.

Rollen Sie Ihre eigenen Google-Buttons

In diesem Tutorial wird gezeigt, wie Sie skalierbare Schaltflächen im Google-Stil mit farbigen Rändern erstellen. Das Endergebnis ist minimalistisch und sauber.

Beispiele und Tools

10 tolle CSS3-Schaltflächen 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, werden aber nur mit CSS3 und ohne Bilder erstellt.

Lesen:  Testfall, Testszenario, Testskript, Testsuite und Testlauf: der Hierarchie-Erklärer

CSS3-Verlaufsschaltflächen

Dies ist eine riesige Sammlung von CSS3-Schaltflächen von Web Designer Wall. Enthalten sind verschiedene Formen, Größen und Farben, alle mit Farbverläufen. Einer der besten Aspekte an ihnen ist jedoch, wie elegant diese Schaltflächen in Browsern funktionieren, die nicht über vollständige CSS3-Unterstützung verfügen.

Knopfmacher

CSS-Tricks bietet diesen kostenlosen CSS3-Button-Ersteller an. Definieren Sie einfach die Hintergrundfarben für jeden Zustand der Schaltfläche, die Größe und die Textattribute, und schon wird der CSS-Code für Sie erstellt.

Radioaktive Knöpfe

Diese Schaltflächen nutzen CSS-Animationen in Safari, um einen pulsierenden, leuchtenden Effekt zu erzeugen. In anderen Browsern, die CSS3 unterstützen, funktionieren sie immer noch einwandfrei und sehen gut aus.

Kennen Sie andere Techniken zum Erstellen toller CSS-Schaltflächen, die hier nicht erwähnt wurden? Oder haben Sie ein Lieblingsbeispiel? Bitte teilen Sie sie in den Kommentaren!

Aktuelle Artikel:

Empfohlen