CSS-knappar är det första besökare interagerar med på en webbplats. En bra knapp drar blicken till sig, uppmuntrar till handling och fungerar utan JavaScript på mobilen. En dålig smälter in i bakgrunden och ger ingen återkoppling vid klick. Ändå ser de flesta knappar likadana ut: en platt rektangel, en färgändring vid hover, och det är allt. Men en knapp kan vara ett designelement i sin egen rätt, med animation, en 3D-effekt, gradientfyllning eller en ikon som glider in vid hover.

En av de mest välkända uppsättningarna av kreativa knappar är CreativeButtons från Codrops-studion. Det är en samling med åtta stilkategorier, från minimalistiska ramar till volymetriska 3D-transformationer. Källkoden är öppen, koden är ren och demosidan fungerar fortfarande 13 år efter publicering. I den här artikeln tittar vi på vilka stilar som ingår i setet, hur du lägger till dem på valfri webbplats och hur du integrerar dem med WordPress via functions.php.

💡 Snabb översikt:

• Ladda ner arkivet från Codrops GitHub-repo, som innehåller alla CSS-filer och demo-uppmärkning
• Länka in component.css och default.css i ditt projekt, kopiera HTML-uppmärkningen för den knappstil du behöver
• För WordPress, lägg till wp_enqueue_style i ditt temas functions.php och ange sökvägen till filerna i temamappen
• Anpassa färger och storlekar efter din design: överskrid CSS-egenskaper i en child-stilmall
• Se videohandledningen för CSS-knappeffekter nedan för att se animationerna i aktion

Vad är CreativeButtons

Codrops publicerade CreativeButtons i juni 2013 som en demonstration av CSS3:s uttrycksfulla möjligheter. Setet innehåller åtta stilkategorier, där var och en löser sin egen visuella uppgift:

Varje knapp är ren HTML och CSS. Några få stilar (som btn-4 med ikon) använder JavaScript för att växla klasser vid klick, men den huvudsakliga magin ligger i transition, transform och pseudoelementen ::before och ::after.

Ikonerna i setet kommer från IcoMoon-biblioteket. De infogas via ::before-pseudoelementet med ett tecken från ett ikon-typsnitt, vilket eliminerar behovet av att ladda separata SVG-filer.

HTML-uppmärkning: ett universellt ramverk

Knapparnas uppmärkning är avsiktligt enkel. Utvecklaren lägger till en gemensam klass och två numrerade klasser till ett <button>-element:

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

Klassen btn nollställer webbläsarens standardstilar (ram, outline, bakgrund). Klassen btn-6 innehåller gemensamma egenskaper för kategorin (streckad ram, avrundning). Klassen btn-6d är den individuella stilen för en specifik knapp inom kategorin. Denna trenivåstruktur gör det möjligt att kombinera dussintals variationer med minimal kodduplicering.

Om knappen innehåller en ikon läggs ytterligare en klass till, till exempel btn-4a icon-arrow-right. Ikonen renderas via ::before med ett innehållstecken från IcoMoon-typsnittet:

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

En viktig notering: i demoversionen är klasserna separerade enbart i demonstrationssyfte. I ett produktionsprojekt bör egenskaperna för en stil kombineras till en enda klass, vilket minskar selektorvikt och förenklar överskridningar.

CSS-stilar: från nollställning till animation

Basklassen .btn gör det minimala: tar bort webbläsarens bakgrund, ram och padding, sätter cursor: pointer och position: relative (för positionering av pseudoelement). All uttrycksfullhet kommer från kategori- och individuella klasser.

Här är ett exempel på stilar för knappen btn-6d (streckad ram med fyllning vid hover):

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
}

Ingen magi här, bara transition och ändring av värdena för background och color vid hover. Samma princip är grunden för alla åtta kategorier. Skillnaden ligger i detaljerna: vissa lägger till transform: scale(), vissa använder box-shadow för djup, och vissa animerar via @keyframes för en oändlig pulseringscykel.

Anslutning till WordPress

För att knapparna ska fungera i ett WordPress-tema måste du ladda upp CSS-filerna till temamappen och inkludera dem via wp_enqueue_style. Skapa en undermapp (till exempel JS_CSS_Plugins/CreativeButtons/css/) i din aktiva temakatalog och kopiera component.css och default.css dit.

Lägg sedan till detta i functions.php:

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' );

De två separata funktionerna i originalexemplet har ersatts med en, vilket gör det renare och enklare att underhålla. Inkluderingsordningen spelar roll: först component.css (huvudsakliga kategoristilar), sedan default.css (individuella knappstilar). Om det uppstår en konflikt med ditt tema, överskrid de nödvändiga egenskaperna i en child-stilmall med högre prioritet.

Moderna alternativ: vad har förändrats på 13 år

CreativeButtons är ett beprövat set, men CSS har utvecklats enormt sedan 2013. Om du startar ett nytt projekt 2026, överväg mer moderna verktyg:

• CSS-variabler. Istället för hårdkodat #226fbe, använd var(--btn-primary). Detta förenklar färgschemabyten och stöd för mörkt tema.
• Logiska egenskaper. padding-inline och margin-block istället för padding-left/right och margin-top/bottom, så att knappen visas korrekt på RTL-språk utan extra kod.
• prefers-reduced-motion. Slå in animationer i en media query och inaktivera dem för användare med rörelsekänslighet.
• Färdiga samlingar. Free Frontend underhåller en samling med 220+ CSS-knappar med CodePen-demos, och Uiverse erbjuder 1900+ alternativ med Tailwind-kompatibilitet.

Men om du behöver ett minimalistiskt, begripligt set som inte är beroende av ramverk är CreativeButtons fortfarande ett utmärkt val. Koden kan läsas på en halvtimme, modifieras för vilken design som helst och har inga beroenden.

Se denna korta handledning om CSS hover-effekter, från grundläggande övergångar till komplexa animationer i ren CSS:

Videon visar tydligt hur transition, transform och keyframes-animationer fungerar på knappar. Efter att ha sett den kommer du att kunna inte bara återskapa CreativeButtons-stilar utan också skriva dina egna effekter från grunden.

⁉️🤔 Vanliga frågor

Kan jag använda CreativeButtons i kommersiella projekt?

Ja, källkoden distribueras fritt. GitHub-repot innehåller ingen uttrycklig licens, men Codrops publicerar demoresurser som allmänt tillgängliga för inlärning och användning. För fullständig säkerhet, lägg till en länk till källan i dina CSS-kommentarer.

Behöver jag inkludera båda CSS-filerna?

Nej. Om du bara behöver en knappstil, kopiera motsvarande CSS-regler till ditt temas huvudstilmall. component.css och default.css är separerade för enklare demonavigering, inte av teknisk nödvändighet.

Hur ändrar jag knappens färg för att matcha mitt varumärke?

Hitta selektorn för den stil du behöver i default.css (till exempel .btn-6d) och ersätt värdena för color och border-color. För gradientstilar (btn-8), ersätt färgerna i background-image: linear-gradient(). Överskrid i ett child-tema eller i WordPress-anpassaren (sektionen "Ytterligare CSS").

Fungerar knapparna på mobila enheter?

Ja, alla effekter är byggda på :hover och transition, vilket hanteras korrekt av mobila webbläsare. Tänk på att pekskärmar inte har ett hover-tillstånd som sådant: webbläsaren tillämpar hover-stilar vid första tryckningen, och åtgärden utlöses vid den andra. För kritiska CTA-knappar, använd stilar som ser bra ut även utan hover-effekten.

Är det värt att använda CreativeButtons 2026

CreativeButtons är ett sällsynt fall där kod från 2013 förblir funktionell och användbar. CSS-specifikationerna den bygger på (transition, transform och pseudoelement) har sedan länge blivit standard och stöds av alla webbläsare.

Använd detta set om du behöver: snabb prototypframtagning utan ramverk, en tydlig kodbas för att lära upp juniora utvecklare, eller färdiga stilar för ett personligt projekt som inte kräver ett designsystem på företagsnivå. För ett stort kommersiellt projekt är det mer meningsfullt att välja en modern samling med CSS-variabler och inbyggt stöd för tillgänglighet.

Ladda ner CreativeButtons från GitHub och prova vilken som helst av de åtta kategorierna i ditt projekt, från prototyp till produktion.