Bricks Builder Button

A Bricks Builder Button elem egy előre stílusozott, kattintható felület: szöveg, opcionálisan ikon, és egy méret- meg színsémákból összerakott megjelenés. A frontenden mindig kap egy bricks-button osztályt, amihez a téma alapstílusa tartozik, tehát nem kell nulláról felépítened egy gombot — paddinggel, keretsugárral és hover állapottal együtt érkezik.

Ami elsőre meglepő benne: alapértelmezetten nem <button> taget ad ki, hanem <span>-t. Ha megadsz neki linket, a Bricks <a>-ra cseréli, és ilyenkor a HTML tag mező el is tűnik a panelről, mert a link dönt. Ez a viselkedés magyarázza a gombokkal kapcsolatos hibák nagy részét: egy link nélküli, taget nem állító Button egy kattinthatónak látszó, de billentyűzettel elérhetetlen <span> marad az oldalon.

A választás azon múlik, mekkora súlyt kap a cselekvés. Egy oldalon jellemzően egy elsődleges Button van szekciónként, mert ha minden hivatkozás gombnak néz ki, egyik sem lesz hangsúlyos. Folyó szövegbe illeszkedő hivatkozáshoz a Text Link a helyes elem, egy cikk törzsében pedig a Rich Text saját linkjei. Ha a teljes kártya kattintható kell legyen, azt a Block szintjén megadott linkkel oldd meg, és ilyenkor a kártyán belül ne legyen külön linkelt Button, mert egymásba ágyazott elemek érvénytelen HTML-t adnak.

E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „Button”, és a kívánt szülőbe, egy Container-be vagy Block-ba húzod. „I am a button” felirattal és primary stílussal jön létre, a szövegét pedig közvetlenül a vásznon átírhatod. Ha több gomb kerül egymás mellé, ne margóval tartsd köztük a távolságot: tedd őket egy Container-be, és a gap értéke adja a térközt, mert mobilon így törnek egymás alá rendesen. A Ctrl+Shift+Z az utolsó módosítást vonja vissza.

Szöveg és HTML tag. A Text mezőbe kerül a felirat, dynamic taggel is. A HTML tag mező alapértelmezett értéke span, és csak akkor jelenik meg a panelen, ha nincs link megadva — mert ha van, az elem automatikusan lesz. Ha a gomb nem navigál, hanem csinál valamit (űrlapot küld, felugró ablakot nyit, JavaScriptet indít), ide írd be, hogy button. Ez az egyik legfontosabb beállítás az elemen, és a leggyakrabban kihagyott.

Méret. Négy előre definiált méret közül választhatsz: Small, Medium, Large és Extra large. A választott érték osztályként kerül az elemre (sm, md, lg, xl), és a téma stílusa adja hozzá a paddinget meg a betűméretet. Ha egyikkel sem vagy elégedett, ne a méretet cseréld, hanem a Style fülön írd felül a paddinget és a tipográfiát.

Stílus, Outline, Circle. A Style legördülő a Bricks színsémáit kínálja: Primary, Secondary, Light, Dark, Muted, Info, Success és Warning. Alapból a kitöltött változat kerül az elemre (bricks-background-primary osztály), az Outline bepipálásával viszont keretes, átlátszó hátterű gomb lesz belőle (bricks-color-primary plusz outline). A Circle négyzettel kör alakúvá válik a gomb, amit jellemzően ikonos, felirat nélküli gombnál használunk — erről lentebb, az akadálymentesítésnél még lesz szó.

Link. A Link type mezőben adod meg, hová visz a gomb: külső URL, belső bejegyzés vagy oldal, média, lightbox, vagy dinamikus mező értéke. Amint ez ki van töltve, a kimenet lesz. Új ablakban nyitásnál a Bricks gondoskodik a rel attribútumról, de érdemes meggondolni, hogy tényleg kell-e: a saját oldaladon belüli navigációnál általában zavaró.

Ikon. Az Icon mezőben választasz ikont, a Position a szöveg bal vagy jobb oldalára teszi (alapértelmezetten jobbra), a Gap a szöveg és az ikon közti távolságot adja, a Space between pedig a gomb két széléhez tolja őket. Az Icon alatti Typography csoport kifejezetten az ikonra vonatkozik, tehát külön méretezheted és színezheted a felirattól. Iránymutató ikonnál (nyíl, külső link) ez pár másodperces munka, és sokat javít a gomb olvashatóságán.

Tipográfia, háttér, keret. A Style fülön a szokásos módon állítod a betűtípust, a hátteret, a keretet, a keretsugarat, az árnyékot és a paddinget, külön a normál és a hover állapotra. Ha az egész oldalon egységes gombstílust szeretnél, azt a Bricks → Theme Styles → Button alatt érdemes megadni, és csak indokolt esetben felülírni elem szinten — így egy helyen tudod frissíteni az összeset.

Itt dől el, hogy a gombod működik-e mindenkinek. A szabály egyszerű: ha a gomb máshová visz, akkor link, tehát adj neki Link type értéket, és a kimenet lesz. Ha a gomb csinál valamit ugyanazon az oldalon — űrlapot küld, akkordiont nyit, modált hív elő —, akkor a HTML tag mezőbe button kerül. Az alapértelmezett egyik esetben sem jó: nem lehet Tabbal odajutni, Enterrel aktiválni, és a képernyőolvasó sem mondja meg róla, hogy kattintható.

A felirat szövege önmagában rangsorolási és használhatósági tényező. A „Kattints ide” és a „Tovább” semmit nem mond sem a keresőnek, sem annak, aki a linkeket listázva pásztázza az oldalt; az „Ajánlatot kérek” vagy az „Árak megtekintése” viszont igen. Belső linkeknél ez a felirat lesz a horgonyszöveg, tehát érdemes benne tartani azt a kifejezést, amire a céloldal rangsorol.

Három további dolog, amit érdemes végignézni. Az ikonos, felirat nélküli gomb (tipikusan a Circle) a képernyőolvasónak néma marad, ezért adj neki aria-label értéket a Style fül Custom Attributes mezőjében. A gomb és a háttere közti kontraszt érje el a 4,5:1 arányt, ami a Light és a Muted stílusnál világos háttéren gyakran nem teljesül. A tapintható méret pedig mobilon legalább 44×44 pixel legyen, amit a Small méret padding nélkül nem mindig hoz.

A leggyakoribb eset, hogy a gomb egérrel működik, billentyűzettel viszont nem lehet elérni. Ez a link nélkül hagyott, span tagen maradt Button. Nézd meg, mit csinál a gomb: navigál, akkor kap linket, cselekszik, akkor a tagje legyen button.

Ha a gomb szélessége nem az, amit vársz, az általában a szülő elrendezésén múlik. A gomb alapból a tartalmához igazodik, de egy column irányú, stretch igazítású Container-ben teljes szélességűre nyúlik. Ha ezt nem szeretnéd, a szülő Align Items értéke legyen flex-start vagy center, ne a gombra rakj fix szélességet.

Ha a Theme Styles alatt beállított gombstílus nem érvényesül egy adott gombon, akkor azon az elemen valaki felülírta a színt vagy a paddinget. Az elem szintű beállítás mindig erősebb, tehát töröld onnan, amit globálisan akarsz kezelni.

Ha egy kártyán belül a gomb linkje nem működik rendesen, vagy a böngésző furcsán viselkedik, nézd meg, hogy nincs-e a kártyát tartó Block-on is link. Két egymásba ágyazott érvénytelen HTML, és kiszámíthatatlan lesz tőle a kattintás. Vagy a kártya legyen kattintható, vagy a gomb, de ne mindkettő.

Ha a gomb hover állapota ugrik, ahelyett hogy átúszna, hiányzik a transition. A Style fül Custom CSS mezőjébe írt transition: all .3s ease ezt megoldja, és ugyanaz a trükk, mint a kártyáknál.

Mielőtt élesbe teszed az oldalt, érdemes végigfutni ezeken: minden gomb elérhető-e Tabbal, a navigáló gombokon van-e link és a cselekvőkön button tag, beszédes-e a felirat, van-e aria-label az ikonos gombokon, elég nagy-e a tapintható felület mobilon, megfelel-e a kontraszt, és nincs-e linkelt gomb egy linkelt kártyában. Ha ebben elakadsz, vagy inkább profira bíznád, kérhetsz ajánlatot is.

Vörös László WordPress fejlesztő és Bricks Builder szakértő. Több mint 20 éve webfejlesztőként, 18 éve WordPress fejlesztőként dolgozom. Specialitásom a Bricks Builder, SEO és a biztonságos weboldalak fejlesztése.