Egy gombnak egy dolga van: egyértelművé tenni a következő lépést. A Gomb blokk akkor kell, amikor a környező tartalom már elmondta, amit kell, és a látogatónak most cselekednie lehet. A feliratból lehetőleg derüljön ki, mi történik kattintás után.
A Második gomb megjelenítése bekapcsolásával a Gomb blokkba egy második gombot is tehetsz, ugyanúgy, mint a herókban: add meg a Másodlagos link célját és a feliratát, válaszd ki a Másodlagos művelet stílusát (Szöveges link vagy Gomb), a Gombok beállításnál pedig azt, hogy Egymás mellett vagy Egymás alatt álljanak. A blokk igazítása a gombpárra vonatkozik.
Eddig ehhez két Gomb blokk kellett egymás alatt, és a két gomb sosem került egy sorba. Ha a két cél egyenrangú, legyen mindkettő gomb. Ha a második csak további információ, elég a szöveges link, ahogy az alábbi mintán.
Hol kezdődik a gomb? Egy önálló gomb a szöveghasáb szélével egy vonalban indul. Ha szélesebbre szeretnéd tenni, a blokk Szélesség beállításánál válaszd a Teljes szélesség vagy a Széltől szélig értéket.
Írd le a következő lépést a gombon. „Ajánlatot kérek”, „Letöltöm az útmutatót”, „Megnézem az árakat” többet mond, mint a „Kattints ide”. A gomb színe adjon elég kontrasztot, de ne próbáljon fontosabb lenni a teljes oldal üzeneténél.
Ez egy szándékosan egyszerű blokk: a döntés főleg a felirat, a cél és a vizuális hangsúly körül forog.
Rövid, cselekvést leíró szöveg. A látogató értse belőle, mi történik kattintás után.
Belső oldalra, másik tartalomra vagy külső URL-re is vezethet.
Balra, középre vagy jobbra rendezheted a gombot a környező tartalom ritmusához.
Külön beállítható a gomb háttere és feliratszíne.
A gomb saját hátteret, Szélesség beállítást és Olvasható / Széles / Teljes tartalomszélességet is kaphat.
Eszközre vagy időablakra is korlátozható, ha a CTA csak bizonyos helyzetben releváns.
A gomb körüli üzenet mennyisége dönti el.
Egy gomb, egy döntés
A jó CTA konkrét, jó helyen jelenik meg, és a kattintás utáni képernyő pontosan azt adja, amit ígért.