CSS-nupud on esimene asi, millega külastajad veebisaidil kokku puutuvad. Hea nupp tõmbab pilku, innustab tegutsema ja töötab mobiilis ilma JavaScriptita. Halb nupp sulandub taustaga ega anna vajutamisel mingit tagasisidet. Ometi näeb enamik nuppe välja ühetaoline: lame ristkülik, hõljumisel värvimuutus ja kõik. Kuid nupp võib olla omaette disainielement, millel on animatsioon, 3D-efekt, gradienttäide või ikoon, mis hõljumisel sisse libiseb.

Üks tuntumaid loominguliste nuppude komplekte on Codropsi stuudio CreativeButtons. See on kaheksast stiilikategooriast koosnev kollektsioon, mis ulatub minimalistlikest ääristest ruumiliste 3D-teisendusteni. Lähtekood on avatud, kood on puhas ja demoleht töötab endiselt 13 aastat pärast avaldamist. Selles artiklis vaatame, millised stiilid komplekti kuuluvad, kuidas neid igale veebisaidile lisada ja kuidas integreerida neid WordPressiga functions.php kaudu.

💡 Kiire ülevaade:

• Laadi arhiiv alla Codropsi GitHubi repositooriumist, mis sisaldab kõiki CSS-faile ja demo märgendust
• Ühenda component.css ja default.css oma projektiga, kopeeri vajaliku nupustiili HTML-märgendus
• WordPressi puhul lisa wp_enqueue_style oma teema functions.php faili, määrates failide tee teemakaustas
• Kohanda värve ja suurusi oma disainiga sobivaks: kirjuta CSS-omadused üle alamstiililehes
• Vaata allpool olevat CSS-nupu efektide õpetust, et näha animatsioone töös

Mis on CreativeButtons

Codrops avaldas CreativeButtonsi 2013. aasta juunis CSS3 väljendusrikkuse demonstratsioonina. Komplekt sisaldab kaheksat stiilikategooriat, millest igaüks lahendab oma visuaalse ülesande:

Iga nupp on puhas HTML ja CSS. Mõned stiilid (näiteks ikooniga btn-4) kasutavad JavaScripti klasside vahetamiseks klikkimisel, kuid peamine võlu peitub transition'is, transform'is ning ::before ja ::after pseudoelementides.

Komplekti ikoonid pärinevad IcoMooni teegist. Need lisatakse ::before pseudoelemendi kaudu koos ikooni fondi märgiga, välistades vajaduse laadida eraldi SVG-faile.

HTML-märgendus: universaalne raamistik

Nupu märgendus on taotluslikult lihtne. Arendaja lisab <button> elemendile ühe üldise ja kaks nummerdatud klassi:

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

Klass btn lähtestab brauseri stiilid (ääris, kontuur, taust). Klass btn-6 sisaldab kategooria ühiseid omadusi (kriipsjooneline ääris, ümardus). Klass btn-6d on konkreetse nupu individuaalne stiil kategooria sees. See kolmetasandiline struktuur võimaldab kombineerida kümneid variatsioone minimaalse koodi dubleerimisega.

Kui nupp sisaldab ikooni, lisatakse veel üks klass, näiteks btn-4a icon-arrow-right. Ikoon renderdatakse ::before kaudu koos IcoMooni fondi sisumärgiga:

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

Oluline märkus: demoversioonis on klassid eraldatud puhtalt demonstreerimise eesmärgil. Tootmisprojektis tuleks ühe stiili omadused koondada ühte klassi, vähendades selektori kaalu ja lihtsustades ülekirjutamist.

CSS-stiilid: lähtestamisest animatsioonini

Baasklass .btn teeb miinimumi: eemaldab brauseri tausta, äärise ja polsterduse, määrab cursor: pointer ja position: relative (pseudoelementide positsioneerimiseks). Kogu väljendusrikkus tuleb kategooria- ja individuaalklassidest.

Siin on näide btn-6d nupu stiilidest (kriipsjooneline ääris koos täitega hõljumisel):

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
}

Ei mingit maagiat, lihtsalt transition ning background ja color väärtuste muutmine hõljumisel. See sama põhimõte on kõigi kaheksa kategooria alus. Erinevus peitub detailides: mõni lisab transform: scale(), mõni kasutab sügavuse loomiseks box-shadowi ja mõni animeerib @keyframes abil lõputut pulseerimistsüklit.

WordPressiga ühendamine

Selleks et nupud WordPressi teemas töötaksid, tuleb CSS-failid teemakausta üles laadida ja kaasata wp_enqueue_style kaudu. Loo aktiivse teema kataloogi alamkaust (näiteks JS_CSS_Plugins/CreativeButtons/css/) ja kopeeri sinna component.css ja default.css.

Seejärel lisa functions.php faili:

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

Algse näite kaks eraldi funktsiooni on asendatud ühega, muutes selle puhtamaks ja hõlpsamini hallatavaks. Kaasamise järjekord on oluline: kõigepealt component.css (peamised kategooriastiilid), seejärel default.css (individuaalsed nupustiilid). Kui sinu teemaga tekib konflikt, kirjuta vajalikud omadused kõrgema prioriteediga alamstiililehes üle.

Kaasaegsed alternatiivid: mis on 13 aastaga muutunud

CreativeButtons on ajaproovile vastu pidanud komplekt, kuid CSS on 2013. aastast saadik kaugele arenenud. Kui alustad uut projekti 2026. aastal, kaalu moodsamate tööriistade kasutamist:

• CSS-muutujad. Kõvakodeeritud #226fbe asemel kasuta var(--btn-primary). See lihtsustab värviskeemi muutmist ja tumeda teema tuge.
• Loogilised omadused. padding-inline ja margin-block padding-left/right ja margin-top/bottom asemel, et nupp kuvataks paremalt vasakule kirjutatavates keeltes korrektselt ilma lisakoodita.
• prefers-reduced-motion. Mässi animatsioonid meediapäringusse ja keela need liikumistundlikkusega kasutajate jaoks.
• Valmiskollektsioonid. Free Frontend haldab 220+ CSS-nupu kollektsiooni CodePeni demodega ja Uiverse pakub 1900+ varianti Tailwindi ühilduvusega.

Kuid kui vajad minimalistlikku, arusaadavat komplekti, mis ei sõltu raamistikest, on CreativeButtons endiselt suurepärane valik. Kood on loetav poole tunniga, kohandatav igale disainile ja sellel puuduvad sõltuvused.

Vaata seda lühikest õpetust CSS-i hõljumisefektide kohta, alates põhilistest üleminekutest kuni keerukate animatsioonideni puhtas CSS-is:

Video näitab selgelt, kuidas transition, transform ja keyframes animatsioonid nuppudel töötavad. Pärast vaatamist suudad mitte ainult CreativeButtonsi stiile korrata, vaid ka ise nullist oma efekte kirjutada.

⁉️🤔 Korduma kippuvad küsimused

Kas ma võin CreativeButtonsi kasutada ärilistes projektides?

Jah, lähtekood on vabalt levitatav. GitHubi repositoorium ei sisalda selgesõnalist litsentsi, kuid Codrops avaldab demomaterjalid avalikult kättesaadavana õppimiseks ja kasutamiseks. Täieliku kindluse huvides lisa oma CSS-i kommentaaridesse link allikale.

Kas ma pean kaasama mõlemad CSS-failid?

Ei. Kui vajad ainult ühte nupustiili, kopeeri vastavad CSS-reeglid oma teema peamisse stiililehte. component.css ja default.css on eraldatud demo hõlpsamaks navigeerimiseks, mitte tehnilisest vajadusest.

Kuidas muuta nupu värvi oma brändiga sobivaks?

Leia default.css failist vajaliku stiili selektor (näiteks .btn-6d) ja asenda color ja border-color väärtused. Gradiendistiilide (btn-8) puhul asenda värvid background-image: linear-gradient() sees. Kirjuta üle alamteemas või WordPressi kohandajas (jaotis „Lisatud CSS").

Kas nupud töötavad mobiilseadmetes?

Jah, kõik efektid põhinevad :hover ja transition omadustel, mida mobiilibrauserid käsitlevad korrektselt. Pea meeles, et puuteekraanidel ei ole hõljumise olekut kui sellist: brauser rakendab hõljumisstiilid esimesel puudutusel ja tegevus käivitub teisel. Kriitiliste tegevusele kutsuvate nuppude puhul kasuta stiile, mis näevad head välja ka ilma hõljumisefektita.

Kas CreativeButtonsi tasub 2026. aastal kasutada

CreativeButtons on haruldane juhtum, kus 2013. aasta kood on endiselt toimiv ja kasulik. CSS-spetsifikatsioonid, millele see on ehitatud (transition, transform ja pseudoelemendid), on ammu muutunud standardiks ja neid toetavad kõik brauserid.

Kasuta seda komplekti, kui vajad: kiiret prototüüpimist ilma raamistikuteta, selget koodibaasi nooremarendajate õpetamiseks või valmisstiile isiklikule projektile, mis ei vaja ettevõtte tasemel disainisüsteemi. Suure ärilise projekti jaoks on mõistlikum valida kaasaegne kollektsioon koos CSS-muutujate ja sisseehitatud ligipääsetavuse toega.

Laadi CreativeButtons GitHubist alla ja proovi mõnda kaheksast kategooriast oma projektis, prototüübist tootmiseni.