Má smaoiníonn tú air, is iad na cnaipí fuil bheatha do ghnó ar líne. Is féidir leat an suíomh Gréasáin is áille ar domhan, an t-ábhar is snasta, agus an straitéis mhargaíochta is scagtha a bheith agat... ach mura n-oibríonn do chnaipe "Ceannaigh anois," "Cuir coinne in áirithe," nó "Comhrá ar WhatsApp" mar ba chóir, titeann gach rud eile i léig cosúil le teach cártaí.
Ní cearnóg shimplí le dath agus téacs amháin atá i gcnaipe gréasáin: is gné ríthábhachtach den idirghníomhaíocht é. Is é an droichead idir fiosracht agus gníomh é, idir "Tá suim agam" agus "Íocfaidh mé thú." Is beagnach ealaín é é a dhearadh go maith, toisc go gcomhcheanglaíonn sé síceolaíocht, dearadh amhairc, taithí úsáideora (UX), inrochtaineacht, agus fiú méadrachtaí gnó.
Anseo, déanfaimid miondealú, ar bhealach an-phraiticiúil, ar conas cnaipí a chruthú do shuíomhanna gréasáin a bhfuil cuma mhaith orthu ní hamháin ach a spreagann cliceáil freisin. Labhróimid faoi na bunghnéithe, na micrea-idirghníomhaíochtaí a dhéanann an difríocht ar fad, cá háit le iad a chur ar do shuíomh gréasáin chun an tiontú is mó a bhaint amach, agus ar ndóigh, conas iad a chruthú i gcleachtas: ó HTML agus CSS íon go dtí úsáid a bhaint as tógálaithe leathanach amhairc WordPress cosúil le Elementor, Divi, nó Gutenberg.
Féachfaimid freisin ar an gcaoi a ndéanann creatlacha cosúil le Bootstrap agus Tailwind an saol níos éasca le patrúin réamhshainithe, agus conas cuimhneamh ar an ngné is tábhachtaí ar fad: inrochtaineacht. Mar mura féidir le gach duine do chnaipe a úsáid, níl do dhearadh críochnaithe.
Botún clasaiceach: cnaipí a bhfuil cuma téacs simplí orthu, nó naisc a bhfuil cuma cnaipí orthu. Is rud é affordance , go bunúsach, a "bhéicíonn" cad é atá ann. Ba chóir go mbeadh cuma chliceála ar chnaipe gan an t-úsáideoir a bheith ag smaoineamh faoi dhó. Cuidíonn teorainneacha sainithe, codarsnacht leordhóthanach, scáthanna, nó cabhradh caolchúiseach le cuairteoir a aithint go tapa cá háit le hidirghníomhú.
Déanann an ordlathas amhairc an chuid eile: ní mór do phríomhchnaipe (CTA — Glao chun Gnímh) seasamh amach ó na heilimintí eile. Mura bhfuil aon rud ar do shuíomh Gréasáin chomh geal céanna, ní lonraíonn aon rud.
Sampla praiticiúil :
Cnaipe caillte i lár bloc téacs (ní thugann aon duine faoi deara é).
Cnaipe le codarsnacht agus spás bán timpeall air (feiceann gach duine é).
Tá cnaipe "Cuir Isteach" feidhmiúil. Ach tá cnaipe a deir "Ba mhaith liom mo luachan" nó "Íoslódáil mo threoir saor in aisce" mealltach. Bíonn tionchar ollmhór ag micreachóip — an téacs beag sin taobh istigh den chnaipe — ar chomhshó.
Na trí riail órga:
Briathar gnímh : a léiríonn go soiléir cad a tharlóidh.
Sochar díreach : an méid a ghnóthaíonn an t-úsáideoir ón gclic sin.
Saor ó fhrithchuimilt : seachnaítear amhrais ar nós "cad a tharlóidh ina dhiaidh sin?".
Cnaipe Cineálach | Cnaipe Optamaithe |
|---|---|
seol | Ba mhaith liom mo luachan |
Ceannaigh | Ceannaigh anois le loingseoireacht saor in aisce |
Tuilleadh eolais | Féach conas a oibríonn sé i gceann 2 nóiméad |
Ní rud treallach é dath. Tá baint aige le síceolaíocht, ach thar aon rud eile le infheictheacht . Ba chóir go mbeadh dath ar do phríomhchnaipe a oireann don chúlra agus ag an am céanna a oireann do d’aitheantas amhairc.
Mar shampla, mura bhfuil mórán dathanna gorma ar do shuíomh gréasáin, ná cuir an príomhchnaipe ar chúlra gorm dorcha. Bain úsáid as dathanna comhlántacha (gorm + oráiste, glas + corcra) nó as toin a choinníonn comhsheasmhacht gan codarsnacht a chailleadh.
Chomh maith leis sin, ná déan dearmad ar na treoirlínte inrochtaineachta (WCAG) : ba chóir go mbeadh an cóimheas codarsnachta íosta 4.5:1 le haghaidh téacs gnáth. Cinntíonn sé seo gur féidir le daoine le radharc lag an cnaipe a aithint freisin.
Níor cheart go mbeadh ort súmáil isteach ar fhóin phóca le cnaipe. Molann Google méid tadhaill íosta de 44px ar airde agus 44px ar leithead . Agus ní hamháin an méid atá tábhachtach, ach an spás timpeall air freisin : má tá an t-úsáideoir in ann tapáil gan eagla go mbrúfaidh siad eilimint eile trí thimpiste, feabhsaítear an taithí.
Bíonn cruthanna in ann cumarsáid a dhéanamh freisin: is gnách go meastar cnaipí cruinn a bheith níos cairdiúla; cinn dronuilleogacha, mar cinn níos foirmiúla nó níos corparáideacha. Is í an rud is tábhachtaí ná comhsheasmhacht: ná measc cúig stíl cnaipe ar an suíomh Gréasáin céanna.
Is cosúil le solas tráchta nach n-athraíonn dath choíche cnaipe statach: cruthaíonn sé mearbhall. Úsáidtear stáit chun a chur in iúl don úsáideoir láithreach go mbeidh freagra ar a ngníomh.
Luascán (nuair a bhíonn an luch ag luascán): athraíonn sé dath, cuireann sé scáth leis, nó cuireann sé líne faoi. Ná bí ag cur an iomarca beochan craiceáilte leis; is leor beagán aiseolais amhairc.
Gníomhach (nuair a chliceáiltear): insamhlaíonn sé "titim" nó brú. Deimhníonn sé seo gur cláraíodh an cliceáil.
Fócas (agus méarchlár á úsáid): teorainn infheicthe, gorm de ghnáth. Eochair don inrochtaineacht.
Díchumasaithe: ton liath, codarsnacht níos lú, rud a léiríonn nach bhfuil an gníomh ar fáil fós.
📌 Sampla praiticiúil :
Luascán: Cnaipe gorm a éiríonn níos éadroime nuair a luascann tú os a chionn.
Gníomhach: cnaipe a “thiteann” cúpla picteilín.
Fócas: imeall buí marcáilte.
Díchumasaithe: an cnaipe céanna i liath éadrom.
Is fuath le húsáideoirí éiginnteacht. Má chliceálann siad cnaipe agus mura dtarlaíonn aon rud, is dócha go gcliceálfaidh siad faoi dhó (nó go ndúnfaidh siad an leathanach). Agus sin an áit a dtagann fadhbanna isteach: ceannacháin dhúblacha, foirmeacha a chuirtear isteach faoi dhó, earráidí.
An réiteach: aiseolas láithreach.
Luchtaitheoir taobh istigh den chnaipe (“Ag luchtú…” le rothlóir).
Athrú téacs láithreach : “Ag seoladh…” a athraíonn ansin go “Críochnaithe!”.
Nó fiú dearbhú amhairc : ticmharc beoite ✅ tar éis an gníomh a chríochnú.
Sampla:
An cnaipe “Áirithint anois” → nuair a chliceálann tú air téann sé chuig “Ag Próiseáil…” le deilbhín beoite → ansin “Áirithint deimhnithe!”.
Ní hamháin go gcuireann na cineálacha micrea-idirghníomhaíochtaí seo cosc ar earráidí, ach cuireann siad gairmiúlacht agus fócas ar thaithí an úsáideora in iúl freisin . Agus tá, tá meas ag Google orthu freisin mar go mbíonn tionchar acu ar shástacht an úsáideora , rud atá ag éirí níos tábhachtaí do Sinsearach.
Seo botún clasaiceach: an cnaipe "Ceannaigh Anois" a chur a luaithe a lódálann an leathanach. An n-oibríonn sé? Ach amháin má tá a intinn déanta ag an úsáideoir cheana féin (mar shampla, tacsaí a chur in áirithe nó ticéid a cheannach). Ach i bhformhór na gcásanna, is ionann iarraidh ar ghníomh gan réamhshuim a chothú agus pósadh a mholadh ar an gcéad dáta: "níl" ráthaithe .
Os cionn an fhilleadh (le feiceáil gan scrollú): foirfe le haghaidh glaonna chun tacú leo go simplí agus go tapa, amhail "Íoslódáil an treoir" nó "Glaoigh anois".
Tar éis luach a sholáthar: má dhíolann do shuíomh Gréasáin cúrsa, bogearraí, nó seirbhís níos casta, mínigh na buntáistí ar dtús, taispeáin cruthúnas sóisialta, agus ansin iarr gníomh.
👉 An rud idéalach: cuir an dá rud le chéile. Cnaipe le feiceáil ag an mbarr do na glaonna cinntithe + glaonna chuig daoine atá suite go straitéiseach ag pointí tábhachtacha feadh an scrolla.
Scanann súil an duine leathanaigh ghréasáin de réir patrún:
Patrún F: tipiciúil i mblagáin nó i leathanaigh a bhfuil go leor téacs iontu. Tá cnaipí suite go maith ar an taobh clé nó ag deireadh na rannóg.
Patrún Z: níos amhairc, a úsáidtear i leathanaigh tuirlingthe nua-aimseartha. De ghnáth bíonn glaonna chun tacú leo ag deireadh gach "trasnáin" den Z.
Cuir acmhainní ar nós:
Barraí greamaitheacha: cnaipe seasta ag bun an scáileáin mhóibíligh, cosúil le "Áirithint anois", atá in aice láimhe i gcónaí.
Glaonna tánaisteacha ar thacaíocht: Más é "Fostaigh" do phríomhghlacadh ar thacaíocht, cuir glao tánaisteach ar thacaíocht nach bhfuil chomh tiomanta sin leis, amhail "Foghlaim níos mó" nó "Sceidealaigh taispeántas". Ar an mbealach seo, ní chaillfidh tú iad siúd nach bhfuil réidh fós don phríomhghníomh.
Tagann 80 % den trácht chuig formhór na suíomhanna gréasáin ó fhóin phóca. Cá háit a gcoinnímid ár n-ordóga de ghnáth? Síos. Cá gcuirimid na cnaipí? Is minic… suas 🙃. Botún sa téacsleabhar.
Cuir glaonna chun tacú leo ag bun nó taobh istigh de chrios te an ordóige.
Bain úsáid as méideanna cuí: 44x44px ar a laghad (moladh Apple) ionas gur féidir cliceáil orthu gan súmáil isteach.
Seachain iad a chur ró-ghar dá chéile: cnaipí atá ró-ghar dá chéile ar fhóin phóca = cliceáil mícheart.
An ceann is bunúsaí agus is uilíche: cnaipe le HTML agus CSS. Anseo is é an rud tábhachtach ná idirdhealú a dhéanamh idir cnaipe ríoga (<button>) a nasc cosúil le cnaipe (<a>)Tá an dá cheann bailí, ach tá comhthéacsanna difriúla acu:
<button>: le haghaidh gníomhartha laistigh de fhoirmeacha nó a spreagann imeacht JS.
<a> le href: le haghaidh brabhsála, atreoraithe nó íoslódáil.
Le CSS is féidir leat imirt le:
Dathanna agus grádáin chun oiriúnú do do bhranda.
Imill chruinne chun mothú níos cairdiúla a thabhairt (sampla: stíl "piolla").
Scáthanna agus aistrithe caolchúiseacha a thugann cuireadh do chliceáil.
👉 Acmhainn phraiticiúil a mholaim is ea leabharlann de stíleanna CSS in-athúsáidte do chnaipí a bheith agat. Cuidíonn sé seo leat comhsheasmhacht a choinneáil agus sábhálann sé am.
<!-- Botón básico con <button> -->
<button class="btn">Haz clic aquí</button>
<!-- Enlace con apariencia de botón -->
<a href="/ga/contacto" class="btn btn-secundario">Contáctanos</a>
/* Estilos base reutilizables */
.btn {
background: linear-gradient(135deg, #0E6BA8, #0B4F7B); /* degradado corporativo */
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 8px; /* esquinas suaves tipo “pill” */
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* sombra sutil */
}
.btn:hover {
background: linear-gradient(135deg, #0B4F7B, #093856); /* cambio de degradado */
transform: translateY(-2px); /* efecto “levantar” */
}
.btn-secundario {
background: #FF6F61; /* color alternativo */
}
Éilíonn dearadh tosaigh nua-aimseartha cnaipí nach bhfuil "ann amháin" ach a sholáthraíonn aiseolas freisin . Samplaí:
Cnaipí díchumasaithe go dtí go mbeidh foirm comhlánaithe.
Cnaipí le luchtóir nuair a chuireann tú foirm isteach nó nuair a dhéanann tú gníomh.
Cnaipí le hathrú stádais dinimiciúil: “Cuir leis an gciseán” → “Táirge curtha leis ✅”.
Ní mian aeistéitiúil é seo: cuidíonn sé le húsáidteacht mar go dtuigeann an t-úsáideoir cad atá ag tarlú agus seachnaíonn sé cliceáil arís agus arís eile nó frustrachas.
<button id="btn-form" class="btn" disabled>Enviar</button>
/* Estado deshabilitado */
.btn:disabled {
background: #ccc;
cursor: not-allowed;
box-shadow: none;
}
// Simulación: activar el botón tras completar un formulario
const btn = document.getElementById('btn-form');
// Simulación de validación
setTimeout(() => {
btn.disabled = false;
btn.textContent = "Enviar ahora";
}, 2000);
// Simulación de loader al hacer clic
btn.addEventListener('click', () => {
btn.disabled = true;
btn.textContent = "Enviando...";
setTimeout(() => {
btn.textContent = "¡Enviado ✅!";
}, 2000);
});
Déanann go leor forbróirí an botún trí úsáid a bhaint as a <div> nó <span> le onclick chun cnaipí a insamhladh. Briseann sé seo inrochtaineacht agus cailleann léitheoirí scáileáin iad.
Chun é a dhéanamh i gceart:
Stáit Aontaithe Mheiriceá <button> o <a> nuair is féidir.
Más gá duit go leor a shaincheapadh, cuir tréithe leis mar shampla role="button" y tabindex="0".
Comhlánaigh le lipéid aria-label nuair nach bhfuil téacs an chnaipe tuairisciúil go leor (sampla: deilbhín gloine formhéadúcháin arb é “Cuardaigh” é i ndáiríre).
Ní bhaineann sé seo le cuimsiú amháin: feabhsaíonn sé do Sinsearach Inneall Cuardaigh (SEO) go hindíreach freisin , mar go luachálann Google inrochtaineacht mar chuid den taithí úsáideora.
<!-- Botón con texto accesible -->
<button>Buscar productos</button>
<!-- Botón solo con icono (accesible con aria-label) -->
<button aria-label="Buscar">
<svg width="16" height="16" fill="currentColor">
<path d="M11 6a5 5 0 1 0-1.293 3.293l4 4 1.414-1.414-4-4A5 5 0 0 0 11 6z"/>
</svg>
</button>
<!-- Div convertido en botón (última opción, si no puedes usar <button>) -->
<div role="button" tabindex="0" aria-label="Descargar archivo">⬇️</div>
Agus tú ag obair ar thionscadal mór, níl 50 stíl cnaipe éagsúil uait . Go hidéalach, ba cheart duit na nithe seo a leanas a shainiú:
Athróga CSS (airíonna saincheaptha): le haghaidh dathanna, méideanna, clóghrafaíocht.
Comharthaí dearaidh: a cheadaíonn dearadh a scálú trasna foirne móra agus comhsheasmhacht branda a choinneáil.
Ranganna úsáideacha: Stíl Tailwind, áit ar féidir leat stíleanna comhsheasmhacha a chur i bhfeidhm gan an roth a athchruthú gach uair.
/* Variables CSS globales */
:root {
--color-primary: #0E6BA8;
--color-primary-dark: #093856;
--color-secondary: #FF6F61;
--border-radius: 8px;
--spacing-y: 12px;
--spacing-x: 24px;
}
/* Estilo base de botones usando variables */
.btn {
background: var(--color-primary);
color: #fff;
padding: var(--spacing-y) var(--spacing-x);
border-radius: var(--border-radius);
border: none;
cursor: pointer;
transition: background 0.3s ease;
}
.btn:hover {
background: var(--color-primary-dark);
}
.btn-secondary {
background: var(--color-secondary);
}
Tháinig muid i dtír ar gach ceann de na rudaí thuasluaite Elementor, Divi y GutenbergAn smaoineamh: a chruthú stíleanna domhanda in-athúsáidte, tabhair aire inrochtaineacht (fócas infheicthe, codarsnacht, aria-*) agus cuir leis micrea-idirghníomhaíochtaí (ag luascadh, luchtóir) gan feidhmíocht a íobairt.
Cuspóir: stíl cnaipe "Príomhúil" dhomhanda is féidir leat a chur i bhfeidhm le 2 chlic, le rogha inrochtana luiche/fócas agus luchtaithe.
Bealach Tapa (UI):
Socruithe Suímh → Stíl Téama → Cnaipí (nó Dathanna/Clónna Domhanda ).
Cruthaigh Comhartha Domhanda (e.g. Cnaipe Príomhúil ).
Ar gach Giuirléid Cnaipí , socraigh Stíl → Clóghrafaíocht/Dathanna le Domhanda.
En Ardleibhéil → Ranganna CSS, cuireann sé leis: z-btn z-btn--primary.
CSS (cuir leis i Socruithe an tSuímh → CSS Saincheaptha nó sa téama linbh):
/* Base accesible y reutilizable */
.z-btn {
--btn-bg: #0E6BA8;
--btn-bg-hover: #09486B;
--btn-color: #fff;
--btn-radius: 10px;
--btn-pad-y: 12px; --btn-pad-x: 22px;
background: var(--btn-bg);
color: var(--btn-color);
border: none;
border-radius: var(--btn-radius);
padding: var(--btn-pad-y) var(--btn-pad-x);
font-weight: 600;
line-height: 1;
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
/* Hover / Active */
.z-btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.z-btn:active { transform: translateY(0); }
/* Focus visible para accesibilidad teclado */
.z-btn:focus-visible {
outline: 3px solid #FFD166; /* alto contraste */
outline-offset: 2px;
}
/* Estado disabled */
.z-btn:disabled,
.z-btn[aria-disabled="true"] {
background: #c9c9c9; color: #6a6a6a; box-shadow: none; cursor: not-allowed;
}
/* Variante secundaria */
.z-btn--secondary { --btn-bg: #FF6F61; --btn-bg-hover:#e95b4e; }
Luchtaitheoir Roghnach (gan breiseán):
Cuir an rang leis js-loading-btn go dtí an cnaipe.
Cuir giuirléid HTML isteach ag deireadh an leathanaigh leis an JS seo (nó i dTógálaí Téamaí le haghaidh domhanda):
<script>
document.addEventListener('click', function(e){
const btn = e.target.closest('.js-loading-btn');
if(!btn || btn.disabled) return;
const original = btn.innerHTML;
btn.disabled = true;
btn.setAttribute('aria-busy','true');
btn.innerHTML = '<span class="z-spinner" aria-hidden="true"></span> Procesando…';
setTimeout(()=>{ btn.innerHTML = '¡Listo!'; btn.removeAttribute('aria-busy'); }, 1200);
setTimeout(()=>{ btn.innerHTML = original; btn.disabled = false; }, 2200);
});
</script>
<style>
.z-spinner{
display:inline-block; width:1em; height:1em; margin-right:.5em;
border:.18em solid rgba(255,255,255,.5); border-top-color:#fff;
border-radius:50%; animation: zspin .8s linear infinite; vertical-align:-2px;
}
@keyframes zspin{to{transform:rotate(360deg)}}
</style>
Cleachtais is Fearr Elementor
Sainmhínigh Dathanna/Clónna Domhanda agus ná stíligh cnaipe ar chnaipe.
Seiceáil Freagrach → Soghluaiste : líonadh mór agus an leithead íosta ar shoghluaiste.
Stáit Aontaithe Mheiriceá aria-label más deilbhín amháin atá sa chnaipe.
Cuspóir: réamhshocrú cnaipe a chruthú le hathúsáid ar fud an tsuímh le fócas agus athruithe inrochtana.
Bealach Tapa (UI):
Cuir Modúl Cnaipe isteach → Dearadh.
Coigeartaigh Clóghrafaíocht/Dath/Imlíne/Scáth.
Sábháil mar Réamhshocrú (Deilbhín giar an mhodúil → Cruthaigh Réamhshocrú Nua ó Stíleanna Reatha ).
Cuir leis Rang CSS: z-btn z-btn--primary.
CSS Domhanda (Divi → Roghanna Téama → CSS Saincheaptha):
/* Preserva estilos de Divi, solo añadimos accesibilidad y variantes */
.et_pb_button.z-btn {
--btn-bg:#0E6BA8; --btn-bg-hover:#09486B; --btn-color:#fff; --radius: 10px;
background: var(--btn-bg) !important; color: var(--btn-color) !important;
border-radius: var(--radius); border: none !important;
box-shadow: 0 6px 14px rgba(0,0,0,.12);
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.et_pb_button.z-btn:hover { background: var(--btn-bg-hover) !important; transform: translateY(-1px); }
.et_pb_button.z-btn:focus-visible {
outline: 3px solid #FFD166; outline-offset: 2px;
}
.et_pb_button.z-btn:disabled { background:#c9c9c9 !important; color:#6a6a6a !important; box-shadow:none; cursor:not-allowed; }
/* Variante secundaria */
.et_pb_button.z-btn--secondary { --btn-bg:#FF6F61; --btn-bg-hover:#e95b4e; }
Luchtóir éadrom i Divi (Comhtháthú → Cuir cód leis an ):
<script>
document.addEventListener('click',function(e){
const btn = e.target.closest('.et_pb_button.z-btn.js-loading-btn');
if(!btn || btn.disabled) return;
const label = btn.textContent.trim();
btn.disabled = true; btn.setAttribute('aria-busy','true');
btn.innerHTML = '<span class="z-spinner" aria-hidden="true"></span> '+(btn.dataset.loading || 'Enviando…');
setTimeout(()=>{ btn.innerHTML = '¡Listo!'; btn.removeAttribute('aria-busy'); }, 1200);
setTimeout(()=>{ btn.textContent = label; btn.disabled=false; }, 2200);
});
</script>
<style>
.z-spinner{ display:inline-block;width:1em;height:1em;margin-right:.5em;border:.18em solid rgba(255,255,255,.5);
border-top-color:#fff;border-radius:50%;animation:zspin .8s linear infinite;vertical-align:-2px;}
@keyframes zspin{to{transform:rotate(360deg)}}
</style>
Leid Úsáideach Divi
Bain úsáid as Réamhshocruithe + Réamhshocruithe Domhanda . Athraigh uair amháin, agus athraíonn sé ar fud an tsuímh.
Gníomhaigh deilbhín ar an gcnaipe ach amháin má sholáthraíonn sé comhthéacs; cuir leis aria-label mura leor an téacs.
Cuspóir: An bloc Cnaipí a úsáid le ranganna saincheaptha agus CSS domhanda le haghaidh córas comhsheasmhach. Patrún rannóige a chruthú le CTA.
Bealach Tapa (UI):
Cuir Bloic isteach → Cnaipí → Cnaipe.
Sa bharra taoibh, cuir leis Rang CSS breise: z-btn z-btn--primary.
Cruthaigh Patrún (Grúpáil rannóg le teideal + téacs + cnaipe, agus sábháil é mar phatrún in-athúsáidte).
CSS (Dealramh → Saincheap → CSS Breise) nó i do théama linbh:
/* Base para Bloque Botón (Gutenberg genera <a class="wp-element-button">) */
.wp-element-button.z-btn {
--btn-bg:#0E6BA8; --btn-bg-hover:#09486B; --btn-color:#fff; --radius:10px;
background: var(--btn-bg); color: var(--btn-color);
border-radius: var(--radius); border: none; padding: 12px 22px; font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.wp-element-button.z-btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.wp-element-button.z-btn:focus-visible { outline:3px solid #FFD166; outline-offset:2px; }
.wp-element-button.z-btn[aria-disabled="true"] { background:#c9c9c9; color:#6a6a6a; box-shadow:none; cursor:not-allowed; }
/* Variantes */
.wp-element-button.z-btn--secondary { --btn-bg:#FF6F61; --btn-bg-hover:#e95b4e; }
Luchtóir (cuir JS le Sleachta Cód nó i do théama linbh):
<script>
document.addEventListener('click', function(e){
const btn = e.target.closest('.wp-element-button.z-btn.js-loading-btn');
if(!btn || btn.getAttribute('aria-busy')==='true') return;
const original = btn.innerHTML;
btn.setAttribute('aria-busy','true'); btn.classList.add('is-busy');
btn.innerHTML = '<span class="z-spinner" aria-hidden="true"></span> '+(btn.dataset.loading || 'Procesando…');
setTimeout(()=>{ btn.innerHTML = 'Hecho ✅'; btn.classList.remove('is-busy'); btn.removeAttribute('aria-busy'); }, 1200);
setTimeout(()=>{ btn.innerHTML = original; }, 2200);
});
</script>
<style>
.wp-element-button.z-btn.is-busy { pointer-events:none; opacity:.9; }
.z-spinner{ display:inline-block;width:1em;height:1em;margin-right:.5em;border:.18em solid rgba(255,255,255,.5);
border-top-color:#fff;border-radius:50%;animation:zspin .8s linear infinite;vertical-align:-2px;}
@keyframes zspin{to{transform:rotate(360deg)}}
</style>
Patrún molta (struchtúr, níl gá le breiseán):
Grúpa → (Ceannteideal H2 + P + Cnaipe Classy) z-btn z-btn--primary js-loading-btn).
Sábháil mar Phatrún “Laoch le CTA”.
Cleachtais is Fearr Gutenberg
Seachain instealladh <span onclick>bain úsáid as an mbloc Cnaipe (séimeantaic cheart).
I Stíleanna Téama (theme.json) sainmhínigh athróga datha/cineáil chun comhsheasmhacht a choinneáil.
Bainimid leas as Bootstrap agus Tailwind le haghaidh luas gan inrochtaineacht ná comhsheasmhacht a íobairt. Cuirimid SVG leis le haghaidh deilbhíní glana agus micrea-idirghníomhaíochtaí nach mbíonn tionchar acu ar fheidhmíocht.
Cuspóir: úsáid a bhaint as séimeantaic agus fóntais Bootstrap, ach gan cloí leis an "cuma réamhshocraithe" . Cruthaímid athruithe agus breithnímid go cúramach fócas/chodarsnacht.
<!-- Botón primario Bootstrap + icono SVG -->
<button class="btn btn-primary d-inline-flex align-items-center gap-2" type="button">
<svg width="16" height="16" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 12h18M12 3v18"/>
</svg>
Empezar ahora
</button>
<!-- Botón secundario con aria-label (solo icono) -->
<button class="btn btn-outline-secondary" type="button" aria-label="Abrir búsqueda">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
</svg>
</button>
CSS: stíleanna branda + fócas infheicthe + sábháilte le haghaidh gluaiseachta
/* Personaliza variables de Bootstrap (ideal en SCSS) o override directo */
.btn-primary{
background:#0E6BA8; border-color:#0E6BA8;
}
.btn-primary:hover{ background:#09486B; border-color:#09486B; }
/* Focus visible consistente y accesible (para todos los botones) */
.btn:focus-visible{
outline:3px solid #FFD166; outline-offset:2px;
}
/* Microanimación segura */
@media (prefers-reduced-motion: no-preference){
.btn{ transition: transform .15s ease, box-shadow .2s ease; }
.btn:hover{ transform: translateY(-1px); }
}
Luchtóir Tapa le Bootstrap (níl gá le Bootstrap JS):
<button class="btn btn-primary js-loading" type="button">Enviar</button>
<script>
document.addEventListener('click', (e)=>{
const b = e.target.closest('.js-loading'); if(!b || b.dataset.busy) return;
const original = b.innerHTML;
b.dataset.busy = "1"; b.disabled = true; b.setAttribute('aria-busy','true');
b.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Procesando…`;
setTimeout(()=>{ b.innerHTML = '¡Listo!'; b.removeAttribute('aria-busy'); }, 1200);
setTimeout(()=>{ b.innerHTML = original; b.disabled = false; delete b.dataset.busy; }, 2200);
});
</script>
Cuspóir: Coinnigh comhsheasmhacht trí dathanna/gathaí a shainiú i tailwind.config.js agus cnaipí a chumadh le ranganna fóntais. Cuirimid leis comhpháirteanna le @apply.
tailwind.config.js (sliocht)
module.exports = {
theme: {
extend: {
colors: {
brand: {
DEFAULT: '#0E6BA8',
dark: '#09486B',
secondary: '#FF6F61'
}
},
borderRadius: { 'brand': '10px' }
}
}
}
CSS (comhad components.css)
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply inline-flex items-center justify-center font-semibold text-white
px-5 py-3 rounded-brand shadow transition;
}
.btn-primary { @apply bg-brand hover:bg-brand-dark; }
.btn-secondary { @apply bg-brand-secondary hover:brightness-95; }
.btn:focus-visible{
outline: 3px solid #FFD166; outline-offset: 2px;
}
}
HTML (Tailwind)
<!-- Botón primario con icono -->
<button class="btn btn-primary gap-2" type="button">
<svg class="w-4 h-4" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 12h18M12 3v18"/></svg>
Empezar ahora
</button>
<!-- Solo icono (accesible) -->
<button class="btn btn-secondary p-3" aria-label="Abrir búsqueda" type="button">
<svg class="w-4 h-4" viewBox="0 0 24 24"><path d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/></svg>
</button>
Luchtaire le Tailwind (éadrom, gan aon spleáchais)
<button class="btn btn-primary js-tw-loading" type="button">Enviar</button>
<script>
document.addEventListener('click', (e)=>{
const b = e.target.closest('.js-tw-loading'); if(!b || b.dataset.busy) return;
const original = b.innerHTML;
b.dataset.busy="1"; b.disabled=true; b.setAttribute('aria-busy','true');
b.innerHTML = `<svg class="w-4 h-4 mr-2 animate-spin inline" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" stroke="white" stroke-width="4" fill="none" opacity=".35"/>
<path d="M22 12a10 10 0 0 1-10 10" stroke="white" stroke-width="4" fill="none"/>
</svg>Procesando…`;
setTimeout(()=>{ b.innerHTML='¡Listo!'; b.removeAttribute('aria-busy'); },1200);
setTimeout(()=>{ b.innerHTML=original; b.disabled=false; delete b.dataset.busy; },2200);
});
</script>
Dea-chleachtais:
SVG Inlíne (mar atá sna samplaí): ceadaíonn oidhreacht currentColor, beochan le CSS agus seachaint iarratais bhreise.
Cuir leis aria-hidden="true" Más deilbhín maisiúil atá ann; bain úsáid as aria-label/téacs le feiceáil má chuireann sé gníomh in iúl.
Micrea-idirghníomhaíochtaí boga: rothlú, scálú beag, athruithe ar theimhneacht. Meas prefers-reduced-motion.
<button class="btn btn-primary gap-2" type="button">
<svg class="w-4 h-4 icon-rotate" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
</svg>
Continuar
</button>
<style>
.icon-rotate{ transition: transform .2s ease; }
.btn:hover .icon-rotate{ transform: rotate(15deg) scale(1.05); }
@media (prefers-reduced-motion: reduce){
.icon-rotate, .btn{ transition: none; }
}
</style>
Baineann cruthú cnaipí do shuíomhanna gréasáin le heispéiris chuimsitheacha a chruthú freisin . Laghdaíonn cnaipe inrochtana frithchuimilt, feabhsaíonn sé rátaí comhshó, agus seachnaíonn sé saincheisteanna dlí. Tosaímis ar an ngnó.
Íoschodarsnacht : 4.5:1 idir téacs an chnaipe agus a chúlra (WCAG AA).
Fócas infheicthe : má dhéanaim nascleanúint leis an méarchlár (Tab/Shift+Tab) caithfidh mé a fheiceáil go soiléir cén cnaipe atá gníomhach.
Ord táblaithe loighciúil : ba chóir don fhócas an sreabhadh amhairc a leanúint.
/* Foco visible consistente en todos los botones */
button:focus-visible,
a.wp-element-button:focus-visible,
.et_pb_button:focus-visible {
outline: 3px solid #FFD166; /* color alto contraste */
outline-offset: 2px;
}
Má tá an cnaipe níl ach deilbhín ann, Cuir aria-label leis an ngníomh (e.g. “Oscail cuardach”).
Mura bhfuil an téacs soiléir (“Seol”), smaoinigh ar rud a chur leis comhthéacs gar nó aria-describedby.
Seachain cnaipí leis an lipéad céanna a athdhéanamh le haghaidh gníomhartha éagsúla san amharc céanna.
<!-- Solo icono, accesible -->
<button aria-label="Abrir búsqueda">
<svg aria-hidden="true" focusable="false" ...>...</svg>
</button>
<!-- Botón con icono + texto: aria-hidden en el icono -->
<button>
<svg aria-hidden="true" ...>...</svg>
Descargar informe
</button>
Stáit Aontaithe Mheiriceá <button> le haghaidh gníomhartha; <a href> le haghaidh nascleanúna.
Mar rogha dheireanach amháin, déan cnaipe as coimeádán le role="button" + tabindex="0" + láimhseáil méarchláir.
<!-- NO recomendado -->
<span onclick="comprar()">Comprar</span>
<!-- Último recurso accesible -->
<span role="button" tabindex="0" aria-label="Comprar ahora"
onclick="comprar()"
onkeydown="if(event.key==='Enter' || event.key===' '){comprar()}">
Comprar
</span>
Leid thapa: Déan tástáil ar do leathanach le méarchlár. Mura féidir leat an gníomh a chríochnú gan luch, níl sé inrochtana.
Mura ndéanann tú tomhas, glacann tú leis. Lipéadaigh do ghairmeacha glaonna, breathnaigh ar iompar, agus feabhsaigh le sonraí.
Rogha éadrom gan GTM (vanilla JS + GA4):
<button class="btn" data-cta="plan_pro" id="cta-plan-pro">Empezar Plan Pro</button>
<script>
window.dataLayer = window.dataLayer || [];
document.addEventListener('click', (e)=>{
const cta = e.target.closest('[data-cta]');
if(!cta) return;
dataLayer.push({
event: 'cta_click',
cta_id: cta.id || null,
cta_name: cta.dataset.cta,
cta_text: cta.textContent.trim(),
cta_location: 'pricing_table'
});
});
</script>
Ansin isteach GA4 Cruthaíonn tú an imeacht molta (nó saincheaptha) ó event=cta_click agus mapálann tú paraiméadair.
Tosaigh leis an rud a mbíonn an tionchar is mó aige de ghnáth:
Cóip cnaipe (sochar díreach vs. gníomh ginearálta).
Suíomh (os cionn na fillte, greamaitheach ar fhóin phóca, deireadh na rannóga).
Dath/codarsnacht (ach treoirlínte do bhranda á n-urramú).
Gearrthóg tástála an-simplí (cóip 50/50):
<button class="btn js-ab-cta" data-variant-a="Probar gratis"
data-variant-b="Empieza sin pagar">Probar gratis</button>
<script>
document.querySelectorAll('.js-ab-cta').forEach(btn=>{
const variant = Math.random() < 0.5 ? 'a' : 'b';
btn.textContent = btn.dataset['variant'+variant.toUpperCase()];
btn.dataset.variant = variant;
btn.addEventListener('click', ()=>{
dataLayer.push({event:'cta_test_click', variant});
});
});
</script>
Leis sin, is féidir leat a fheiceáil anois i GA4 cén cineál a fhaigheann níos mó cliceanna.
Stáit Aontaithe Mheiriceá <a href> nuair a threoraíonn an gníomh chuig URL eile (brabhsáil nó íoslódáil). Úsáid <button> do gníomhaíochtaí (foirmeacha a chur isteach, modúil a oscailt, JS a fhorghníomhú). Coinníonn sé seo séimeantaic cheart, feabhsaíonn sé inrochtaineacht agus déanann sé do HTML níos soiléire d’innill chuardaigh agus do léitheoirí scáileáin.
Mar thagairt, achar tadhaill íosta de 44 × 44 px (Apple/WCAG). Bain úsáid as líonadh ingearach flaithiúil (12–16px) agus méid cló inléite (≥16px). Fág spás idir na cnaipí chun teagmhálacha de thaisme a chosc.
Ní dhíolann dath amháin rud éigin, ach déanann codarsnacht agus comhsheasmhacht rud éigin eile. Cinntigh nach bhfuil an príomhchnaipe ag dul san iomaíocht le heilimintí amhairc eile. Tabhair tús áite don chóip (an tairbhe) agus don suíomh (an pointe sa fhunail) seachas athrú ó ghlas go dearg.
Trí chéim:
Úsáid clibeanna séimeantacha (<button>, <a href>).
Cinntigh codarsnacht agus fócas infheicthe (rialacha CSS roimhe seo).
Cuir leis aria-label ach nuair nach ndéanann an téacs infheicthe cur síos maith ar an ngníomh (deilbhíní amháin).
Níl aon éifeacht luicheála ar fhóin phóca , ach is cúnamh mór iad an luchtóir agus an t-aiseolas cliceáil . Laghdaíonn siad imní úsáideoirí agus cuireann siad cosc ar chliceáil dhúblach (earráidí agus frustrachas). Is feabhsuithe beaga iad, ach feabhsaíonn siad taithí an úsáideora agus, dá bharr sin, do mhéadrachtaí.
Sea. Sainmhínigh ranganna agus athróga CSS domhanda (.z-btn, --btn-bg, --btn-radius) agus cuir i bhfeidhm iad i ngach leagan amach. Ar an mbealach seo bainfidh tú amach comhleanúnachas gan stíleanna a athdhéanamh i ngach tógálaí.
Ní hamháin go bhfuil cnaipí a chruthú do shuíomhanna gréasáin faoi "bosca daite a chur leis". Baineann sé le pointí cinnteoireachta a dhearadh a nascann intinn le gníomh. Má thugann tú aird ar bhunphrionsabail UX (acmhainneacht, ordlathas, cóip agus codarsnacht), má thugann tú urraim d'inrochtaineacht , má chuireann tú stáit agus micrea-idirghníomhaíochtaí i bhfeidhm a sholáthraíonn aiseolas, agus má thomhaiseann tú feidhmíocht le sonraí , ní bheidh i do chnaipí ach maisiú amháin agus beidh siad ina dtiománaithe gnó cumhachtacha.
Cibé an bhfuil tú ag obair le HTML/CSS/JS , Elementor, Divi, nó Gutenberg , nó an bhfuil tú ag brath ar Bootstrap/Tailwind , is ionann an sprioc: cnaipí atá aitheanta láithreach , éasca le tuiscint , agus a bhraitheann iontaofa . Leis sin, tagann an cliceáil go nádúrtha.
Iontrálacha Gaolmhara
