CSS-Buttons sind das Erste, womit Besucher auf einer Website interagieren. Ein guter Button zieht den Blick an, regt zur Handlung an und funktioniert auch mobil ohne JavaScript. Ein schlechter geht im Hintergrund unter und gibt beim Drücken keinerlei Rückmeldung. Dabei sehen die meisten Buttons gleich aus: ein flaches Rechteck, ein Farbwechsel beim Überfahren mit der Maus, das war's. Ein Button kann jedoch ein eigenständiges Gestaltungselement sein, mit Animation, 3D-Effekt, Farbverlauf oder einem Icon, das beim Hovern eingeblendet wird.

Eines der bekanntesten Sets kreativer Buttons ist CreativeButtons vom Studio Codrops. Es handelt sich um eine Sammlung von acht Stilkategorien, die von minimalistischen Rahmen bis hin zu volumetrischen 3D-Transformationen reichen. Der Quellcode ist offen, der Code sauber und die Demo-Seite funktioniert auch 13 Jahre nach der Veröffentlichung noch. In diesem Beitrag sehen wir uns an, welche Stile das Set enthält, wie Sie es in eine beliebige Website einbinden und wie Sie es über functions.php mit WordPress integrieren.

💡 Kurzüberblick:

• Laden Sie das Archiv aus dem Codrops GitHub-Repository herunter, es enthält alle CSS-Dateien und das Demo-Markup
• Binden Sie component.css und default.css in Ihr Projekt ein und kopieren Sie das HTML-Markup für den gewünschten Button-Stil
• Für WordPress fügen Sie wp_enqueue_style in der functions.php Ihres Themes hinzu und geben den Pfad zu den Dateien im Theme-Ordner an
• Passen Sie Farben und Größen an Ihr Design an: Überschreiben Sie CSS-Eigenschaften in einem Child-Stylesheet
• Sehen Sie sich das Tutorial zu CSS-Button-Effekten unten an, um die Animationen in Aktion zu erleben

Was ist CreativeButtons

Codrops veröffentlichte CreativeButtons im Juni 2013 als Demonstration der Ausdrucksmöglichkeiten von CSS3. Das Set umfasst acht Stilkategorien, die jeweils eine eigene visuelle Aufgabe lösen:

Jeder Button besteht aus reinem HTML und CSS. Einige wenige Stile (etwa btn-4 mit Icon) nutzen JavaScript, um Klassen beim Klick umzuschalten, doch die eigentliche Magie liegt in transition, transform und den Pseudoelementen ::before und ::after.

Die Icons im Set stammen aus der IcoMoon-Bibliothek. Sie werden über das Pseudoelement ::before mit einem Zeichen aus einem Icon-Font eingefügt, sodass keine separaten SVG-Dateien geladen werden müssen.

HTML-Markup: ein universelles Grundgerüst

Das Button-Markup ist bewusst einfach gehalten. Der Entwickler weist einem <button>-Element eine allgemeine Klasse und zwei nummerierte Klassen zu:

1
<button class="btn btn-6 btn-6d">Button</button>

Die Klasse btn setzt die Browser-Standardstile zurück (Rahmen, Umriss, Hintergrund). Die Klasse btn-6 enthält die gemeinsamen Eigenschaften der Kategorie (gestrichelter Rahmen, Abrundung). Die Klasse btn-6d ist der individuelle Stil für einen bestimmten Button innerhalb der Kategorie. Diese dreistufige Struktur erlaubt es, Dutzende Varianten mit minimaler Code-Duplizierung zu kombinieren.

Enthält der Button ein Icon, wird eine weitere Klasse hinzugefügt, zum Beispiel btn-4a icon-arrow-right. Das Icon wird über ::before mit einem Inhaltszeichen aus dem IcoMoon-Font dargestellt:

1
.btn-4a::before {
2
    content: "\e005";
3
    font-family: 'icomoon';
4
    margin-right: 8px;
5
}

Ein wichtiger Hinweis: In der Demo-Version sind die Klassen ausschließlich zu Demonstrationszwecken getrennt. In einem Produktivprojekt sollten die Eigenschaften eines Stils in einer einzigen Klasse zusammengeführt werden, um das Selektor-Gewicht zu reduzieren und Überschreibungen zu vereinfachen.

CSS-Stile: vom Reset zur Animation

Die Basisklasse .btn erledigt das Nötigste: Sie entfernt Hintergrund, Rahmen und Innenabstand des Browsers und setzt cursor: pointer sowie position: relative (zur Positionierung der Pseudoelemente). Die gesamte Ausdruckskraft kommt von den Kategorie- und Individualklassen.

Hier ein Beispiel für die Stile des Buttons btn-6d (gestrichelter Rahmen mit Füllung beim Hovern):

1
/* Button 6d — dashed border with background fill */
2
.btn-6d {
3
    border: 2px dashed #226fbe;
4
    color: #226fbe;
5
    background: transparent;
6
    transition: all 0.3s ease;
7
}
8
 
9
.btn-6d:hover {
10
    background: #226fbe;
11
    color: #fff;
12
}

Keine Zauberei, nur transition und das Ändern der Werte für background und color beim Hovern. Dieses Prinzip liegt allen acht Kategorien zugrunde. Der Unterschied steckt im Detail: Manche fügen transform: scale() hinzu, manche nutzen box-shadow für Tiefe und manche animieren über @keyframes einen endlosen Pulsationszyklus.

Einbindung in WordPress

Damit die Buttons in einem WordPress-Theme funktionieren, müssen Sie die CSS-Dateien in den Theme-Ordner hochladen und über wp_enqueue_style einbinden. Legen Sie im Verzeichnis Ihres aktiven Themes einen Unterordner an (zum Beispiel JS_CSS_Plugins/CreativeButtons/css/) und kopieren Sie component.css und default.css dorthin.

Fügen Sie dann Folgendes in die functions.php ein:

1
/**
2
 * Enqueue CreativeButtons CSS files.
3
 * Source: https://github.com/codrops/CreativeButtons
4
 */
5
function creativebuttons_enqueue_styles() {
6
    $theme_uri = get_template_directory_uri();
7
 
8
    wp_enqueue_style(
9
        'creativebuttons-component',
10
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/component.css',
11
        array(),
12
        '1.0.0'
13
    );
14
 
15
    wp_enqueue_style(
16
        'creativebuttons-default',
17
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/default.css',
18
        array(),
19
        '1.0.0'
20
    );
21
}
22
add_action( 'wp_enqueue_scripts', 'creativebuttons_enqueue_styles' );

Die zwei separaten Funktionen aus dem ursprünglichen Beispiel wurden durch eine einzige ersetzt, was die Wartung übersichtlicher und einfacher macht. Die Reihenfolge der Einbindung ist wichtig: zuerst component.css (Hauptstile der Kategorien), dann default.css (individuelle Button-Stile). Sollte es einen Konflikt mit Ihrem Theme geben, überschreiben Sie die betreffenden Eigenschaften in einem Child-Stylesheet mit höherer Priorität.

Moderne Alternativen: Was sich in 13 Jahren verändert hat

CreativeButtons ist ein bewährtes Set, doch CSS hat seit 2013 einen weiten Weg zurückgelegt. Wenn Sie 2026 ein neues Projekt starten, ziehen Sie modernere Werkzeuge in Betracht:

• CSS-Variablen. Statt fest kodiertem #226fbe nutzen Sie var(--btn-primary). Das vereinfacht Farbwechsel und die Unterstützung dunkler Themes.
• Logical Properties. padding-inline und margin-block statt padding-left/right und margin-top/bottom, damit der Button in RTL-Sprachen ohne zusätzlichen Code korrekt dargestellt wird.
• prefers-reduced-motion. Verpacken Sie Animationen in eine Media Query und deaktivieren Sie sie für Nutzer mit Bewegungssensitivität.
• Fertige Sammlungen. Free Frontend pflegt eine Sammlung von über 220 CSS-Buttons mit CodePen-Demos, und Uiverse bietet über 1900 Optionen mit Tailwind-Kompatibilität.

Wenn Sie jedoch ein minimalistisches, verständliches Set benötigen, das nicht von Frameworks abhängt, ist CreativeButtons nach wie vor eine ausgezeichnete Wahl. Der Code lässt sich in einer halben Stunde lesen, an jedes Design anpassen und hat keinerlei Abhängigkeiten.

Sehen Sie sich dieses kurze Tutorial zu CSS-Hover-Effekten an, von einfachen Übergängen bis zu komplexen Animationen in reinem CSS:

Das Video zeigt anschaulich, wie Transition, Transform und Keyframe-Animationen an Buttons funktionieren. Nach dem Ansehen sind Sie in der Lage, nicht nur die CreativeButtons-Stile nachzubilden, sondern auch eigene Effekte von Grund auf zu schreiben.

⁉️🤔 Häufig gestellte Fragen

Kann ich CreativeButtons in kommerziellen Projekten verwenden?

Ja, der Quellcode wird frei verteilt. Das GitHub-Repository enthält keine explizite Lizenz, aber Codrops veröffentlicht Demo-Ressourcen als öffentlich zugänglich zum Lernen und zur Nutzung. Fügen Sie zur vollständigen Sicherheit einen Link zur Quelle in Ihren CSS-Kommentaren ein.

Muss ich beide CSS-Dateien einbinden?

Nein. Wenn Sie nur einen Button-Stil benötigen, kopieren Sie die entsprechenden CSS-Regeln in das Haupt-Stylesheet Ihres Themes. component.css und default.css sind zur leichteren Navigation in der Demo getrennt, nicht aus technischer Notwendigkeit.

Wie ändere ich die Button-Farbe passend zu meiner Marke?

Suchen Sie in default.css den Selektor für den gewünschten Stil (zum Beispiel .btn-6d) und ersetzen Sie die Werte für color und border-color. Bei Verlaufsstilen (btn-8) ersetzen Sie die Farben in background-image: linear-gradient(). Überschreiben Sie die Werte in einem Child-Theme oder im WordPress-Customizer (Bereich „Zusätzliches CSS").

Funktionieren die Buttons auf mobilen Geräten?

Ja, alle Effekte basieren auf :hover und transition, was von mobilen Browsern korrekt verarbeitet wird. Beachten Sie, dass Touchscreens keinen Hover-Zustand im eigentlichen Sinne haben: Der Browser wendet die Hover-Stile beim ersten Tippen an, die Aktion wird beim zweiten ausgelöst. Verwenden Sie für kritische CTA-Buttons Stile, die auch ohne Hover-Effekt gut aussehen.

Lohnt sich der Einsatz von CreativeButtons im Jahr 2026

CreativeButtons ist ein seltener Fall, bei dem Code aus dem Jahr 2013 funktionsfähig und nützlich geblieben ist. Die zugrunde liegenden CSS-Spezifikationen (transition, transform und Pseudoelemente) sind längst Standard und werden von allen Browsern unterstützt.

Nutzen Sie dieses Set, wenn Sie Folgendes benötigen: schnelles Prototyping ohne Frameworks, eine überschaubare Codebasis für die Schulung von Junior-Entwicklern oder fertige Stile für ein privates Projekt, das kein Designsystem auf Unternehmensniveau erfordert. Für ein großes kommerzielles Projekt ist es sinnvoller, eine moderne Sammlung mit CSS-Variablen und integrierter Barrierefreiheit zu wählen.

Laden Sie CreativeButtons von GitHub herunter und probieren Sie eine der acht Kategorien in Ihrem Projekt aus, vom Prototyp bis zur Produktion.