Dacă te gândești bine, butoanele sunt forța vitală a afacerii tale online. Poți avea cel mai frumos site web din lume, cel mai șlefuit conținut și cea mai rafinată strategie de marketing... dar dacă butonul tău „Cumpără acum”, „Programează o întâlnire” sau „Chatează pe WhatsApp” nu funcționează așa cum ar trebui, totul se prăbușește ca un castel de cărți.
Un buton web nu este doar un simplu pătrat cu culoare și text: este un element esențial al interacțiunii. Este puntea dintre curiozitate și acțiune, dintre „Sunt interesat” și „Te voi plăti”. A-l proiecta bine este aproape o artă, deoarece combină psihologia, designul vizual, experiența utilizatorului (UX), accesibilitatea și chiar indicatorii de business.
Aici vom explica, într-un mod foarte practic, cum să creezi butoane pentru site-uri web care nu doar arată bine, ci și încurajează clicurile. Vom vorbi despre elementele fundamentale, micro-interacțiunile care fac toată diferența, unde să le plasezi pe site-ul tău web pentru o conversie maximă și, bineînțeles, cum să le creezi în practică: de la HTML și CSS pur până la utilizarea constructorilor vizuali de pagini WordPress precum Elementor, Divi sau Gutenberg.
Vom analiza, de asemenea, cum framework-urile precum Bootstrap și Tailwind facilitează viața cu ajutorul unor modele predefinite și cum să ne amintim cel mai important aspect dintre toate: accesibilitatea. Pentru că, dacă butonul tău nu poate fi folosit de toată lumea, designul tău nu este complet.
O greșeală clasică: butoane care arată ca text simplu sau linkuri care arată ca niște butoane. Affordance este, practic, ceva care „strigă” ce este. Un buton ar trebui să pară accesibil fără ca utilizatorul să se gândească de două ori. Marginile definite, contrastul suficient, umbrele sau embosarea subtilă ajută un vizitator să identifice rapid unde să interacționeze.
Ierarhia vizuală face restul: butonul principal (CTA - Call to Action) trebuie să iasă în evidență față de celelalte elemente. Dacă totul pe site-ul tău este la fel de strălucitor, nimic nu strălucește.
Exemplu practic :
Buton pierdut în mijlocul unui bloc de text (nimeni nu-l observă).
Buton cu contrast și spațiu alb în jur (toată lumea îl vede).
Un buton „Trimite” este funcțional. Dar un buton care spune „Doresc oferta mea” sau „Descărcați ghidul meu gratuit” este convingător. Microcopierea - acel text mic din interiorul butonului - are un impact uriaș asupra conversiei.
Cele trei reguli de aur:
Verb de acțiune : care indică clar ce se va întâmpla.
Beneficiu direct : ceea ce câștigă utilizatorul în urma clicului respectiv.
Fără frecare : evită îndoielile de genul „ce se întâmplă în continuare?”.
Buton generic | Buton optimizat |
|---|---|
Trimite | Vreau cotația mea |
Cumpăra | Cumpără acum cu livrare gratuită |
Mai multe informatii | Vezi cum funcționează în 2 minute |
Culoarea nu este arbitrară. Este legată de psihologie, dar mai presus de toate de vizibilitate . Butonul tău principal ar trebui să aibă o culoare care contrastează cu fundalul și, în același timp, se potrivește cu identitatea ta vizuală.
De exemplu, dacă site-ul tău web este predominant albastru, nu pune butonul principal pe un fundal albastru închis. Joacă-te cu culori complementare (albastru + portocaliu, verde + violet) sau cu tonuri care mențin consecvența fără a pierde contrastul.
De asemenea, nu uitați de regulile de accesibilitate (WCAG) : raportul minim de contrast ar trebui să fie de 4.5:1 pentru textul normal. Acest lucru asigură că și persoanele cu deficiențe de vedere pot identifica butonul.
Un buton nu ar trebui să te oblige să faci zoom pe mobil. Google recomandă o dimensiune minimă de atingere de 44px înălțime și 44px lățime . Și nu doar dimensiunea contează, ci și spațiul din jur : dacă utilizatorul poate atinge fără teama de a apăsa accidental un alt element, experiența este îmbunătățită.
Formele comunică și ele: butoanele rotunjite tind să fie percepute ca fiind mai prietenoase; cele dreptunghiulare, ca fiind mai formale sau mai corporative. Important este consecvența: nu amestecați cinci stiluri de butoane pe același site web.
Un buton static este ca un semafor care nu își schimbă niciodată culoarea: creează confuzie. Stările sunt folosite pentru a anunța imediat utilizatorul că acțiunea sa va avea un răspuns.
Plasarea cursorului (la trecerea cu mouse-ul): schimbă culoarea, adaugă umbre sau subliniază. Nu exagerați cu animații extravagante; puțin feedback vizual este suficient.
Activ (la clic): simulează o „scufundare” sau o presiune. Aceasta confirmă că clicul a fost înregistrat.
Focalizare (când se folosește o tastatură): chenar vizibil, de obicei albastru. Cheia accesibilității.
Dezactivat: ton gri, contrast redus, indicând faptul că acțiunea nu este încă disponibilă.
📌 Exemplu practic :
Plasați cursorul: Buton albastru care devine mai deschis la culoare când treceți cursorul peste el.
Activ: buton care „scufundă” câțiva pixeli.
Focus: margine galbenă marcată.
Dezactivat: același buton în gri deschis.
Utilizatorii urăsc incertitudinea. Dacă dau clic pe un buton și nu se întâmplă nimic, probabil vor da dublu clic (sau vor închide pagina). Și aici intervin problemele: achiziții duplicate, formulare trimise de două ori, erori.
Soluția: feedback imediat.
Un încărcător în interiorul butonului („Se încarcă…” cu o rotiță rotativă).
O schimbare instantanee a textului : „Se trimite…”, care apoi se transformă în „Gata!”.
Sau chiar o confirmare vizuală : o bifă animată ✅ după finalizarea acțiunii.
Exemplu:
Butonul „Rezervă acum” → când este apăsat, se afișează „În curs de procesare…” cu o pictogramă animată → apoi „Rezervare confirmată!”.
Aceste tipuri de micro-interacțiuni nu numai că previn erorile, dar transmit și profesionalism și o concentrare pe experiența utilizatorului . Și da, Google le apreciază și pentru că au impact asupra satisfacției utilizatorilor , ceea ce este din ce în ce mai important pentru SEO.
Iată o greșeală clasică: plasarea butonului „Cumpără acum” imediat ce se încarcă pagina. Funcționează? Numai dacă utilizatorul s-a hotărât deja (de exemplu, rezervă un taxi sau cumpără bilete). Dar, în majoritatea cazurilor, a cere o acțiune fără a crea anticipare este ca și cum ai cere în căsătorie la prima întâlnire: un „nu” garantat.
Above the fold (vizibil fără derulare): perfect pentru îndemnuri la acțiune simple și rapide, cum ar fi „Descărcați ghidul” sau „Sunați acum”.
După ce oferiți valoare: dacă site-ul dvs. web vinde un curs, un software sau un serviciu mai complex, explicați mai întâi beneficiile, arătați dovezi sociale și apoi solicitați acțiune.
👉 Idealul: combinați ambele. Un buton vizibil în partea de sus pentru acțiunile determinate + îndemnuri la acțiune plasate strategic în puncte cheie de-a lungul derulării.
Ochiul uman scanează paginile web urmând modele:
Modelul F: tipic în bloguri sau pagini cu mult text. Butoanele sunt bine plasate în partea stângă sau la sfârșitul secțiunilor.
Model Z: mai vizual, utilizat în paginile de destinație moderne. Îndemnurile la acțiune (CTA) se află de obicei la sfârșitul fiecărei „diagonale” a literei Z.
Adăugați la acestea resurse precum:
Bare fixe: un buton fix în partea de jos a ecranului mobilului, precum „Rezervă acum”, întotdeauna la îndemână.
Îndemnuri secundare: Dacă îndemnul principal este „Angajează”, adaugă un îndemn secundar mai puțin dedicat, cum ar fi „Află mai multe” sau „Programează o demonstrație”. În acest fel, nu îi pierzi pe cei care nu sunt încă pregătiți pentru acțiunea principală.
80 % din traficul către majoritatea site-urilor web provine de pe mobil. Unde ne ținem de obicei degetele mari? În jos. Unde punem butoanele? Adesea... în sus 🙃. O greșeală de manual.
Plasați îndemnuri la acțiune în partea de jos sau în interiorul zonei fierbinți a degetului mare.
Folosește dimensiuni adecvate: cel puțin 44x44px (recomandarea Apple), astfel încât să fie posibilă accesarea clicurilor fără a fi nevoie de zoom.
Evitați să le puneți prea aproape unul de celălalt: butoanele prea apropiate pe mobil = clicuri greșite.
Cel mai elementar și universal: un buton cu HTML și CSS. Aici important este să diferențiem un buton regal (<button>) o link de tip buton (<a>)Ambele sunt valide, dar au contexte diferite:
<button>: pentru acțiuni din cadrul formularelor sau care declanșează un eveniment JS.
<a> cu href: pentru navigare, redirecționare sau descărcare.
Cu CSS te poți juca cu:
Culori și gradiente pentru a se adapta la brandul tău.
Margini rotunjite pentru o senzație mai prietenoasă (exemplu: stil „pastilă”).
Umbre subtile și tranziții care invită la clicuri.
👉 O resursă practică pe care o recomand este o bibliotecă de stiluri CSS reutilizabile pentru butoane. Acest lucru te ajută să menții consecvența și economisește timp.
<!-- Botón básico con <button> -->
<button class="btn">Haz clic aquí</button>
<!-- Enlace con apariencia de botón -->
<a href="/ro/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 */
}
Designul modern al front-end-ului necesită butoane care nu numai că „sunt prezente”, ci oferă și feedback . Exemple:
Butoanele sunt dezactivate până la completarea unui formular.
Butoane cu un încărcător atunci când trimiteți un formular sau efectuați o acțiune.
Butoane cu schimbare dinamică de stare: „Adaugă în coș” → „Produs adăugat ✅”.
Acesta nu este un capriciu estetic: ajută la ușurința în utilizare, deoarece utilizatorul înțelege ce se întâmplă și evită clicurile repetate sau frustrarea.
<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);
});
Mulți dezvoltatori fac greșeala de a folosi un <div> sau un <span> cu onclick pentru a simula butoane. Acest lucru afectează accesibilitatea și face ca cititoarele de ecran să le rateze.
Pentru a face corect:
Folosi <button> o <a> ori de câte ori este posibil.
Dacă trebuie să personalizați multe, adăugați atribute precum role="button" y tabindex="0".
Completați cu etichete aria-label când textul butonului nu este suficient de descriptiv (exemplu: pictograma lupă care este de fapt „Căutare”).
Nu este vorba doar despre incluziune: îmbunătățește indirect și SEO-ul , deoarece Google apreciază accesibilitatea ca parte a experienței utilizatorului.
<!-- 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>
Când lucrați la un proiect mare, nu doriți 50 de stiluri diferite de butoane . În mod ideal, ar trebui să definiți:
Variabile CSS (proprietăți personalizate): pentru culori, dimensiuni, tipografie.
Jetoane de design: care permit scalarea designului în cadrul unor echipe mari și menținerea consecvenței mărcii.
Clase utilitare: stilul Tailwind, unde puteți aplica stiluri consecvente fără a reinventa roata de fiecare dată.
/* 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);
}
Am aterizat toate cele de mai sus în Elementor, Divi y GutenbergIdeea: să creăm stiluri globale reutilizabile, ai grijă accesibilitate (focalizare vizibilă, contrast, aria-*) și adăugați microinteracțiuni (planare, încărcător) fără a sacrifica performanța.
Obiectiv: un stil global de buton „Primar” pe care îl puteți aplica în 2 clicuri, cu opțiuni accesibile de trecere cu mouse-ul/focalizare și încărcare.
Rută rapidă (UI):
Setări site → Stil temă → Butoane (sau Culori/Fonturi globale ).
Creați un token global (de exemplu, butonul principal ).
Pe fiecare widget Button , setați Style → Typography/Culors cu Global.
En Avansat → Clase CSS, adaugă: z-btn z-btn--primary.
CSS (adăugați în Setări site → CSS personalizat sau în tema copil):
/* 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; }
Încărcător opțional (fără plugin):
Adăugați clasa js-loading-btn la buton.
Introduceți un widget HTML la sfârșitul paginii cu acest JS (sau în Theme Builder pentru global):
<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>
Cele mai bune practici Elementor
Definiți culori/fonturi globale și nu stilizați buton cu buton.
Verificați Responsive → Mobile : padding mare și lățime minimă pe mobil.
Folosi aria-label dacă butonul este doar o pictogramă.
Obiectiv: crearea unei presetări pentru butoane care să poată fi reutilizată pe întreg site-ul, cu focalizare și variații accesibile.
Rută rapidă (UI):
Inserare modul buton → Design.
Ajustați Tipografie/Culoare/Bordură/Umbră.
Salvați ca presetare (pictograma roată dințată a modulului → Creați o presetare nouă din stilurile curente ).
ADD Clasa CSS: z-btn z-btn--primary.
CSS global (Divi → Opțiuni temă → CSS personalizat):
/* 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; }
Încărcător ușor în Divi (Integrare → Adăugați cod la ):
<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>
Sfat util pentru Divi
Folosește Presetări + Setări Implicite Globale . Schimbă o dată și se schimbă la nivelul întregului site.
Activează pictograma de pe buton numai dacă oferă context; adaugă aria-label dacă textul nu este suficient.
Obiectiv: Utilizarea blocului Button cu clase personalizate și CSS global pentru un sistem consistent. Crearea unui model de secțiune cu un CTA.
Rută rapidă (UI):
Inserare blocuri → Butoane → Buton.
În bara laterală, adăugați Clasă CSS suplimentară: z-btn z-btn--primary.
Creați un model (grupați secțiunea cu titlu + text + buton și salvați-o ca model reutilizabil).
CSS (Aspect → Personalizare → CSS suplimentar) sau în tema copil:
/* 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; }
Loader (plasează JS cu fragmente de cod sau în tema copil):
<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>
Model recomandat (structură, nu este nevoie de plugin):
Grup → (Antet H2 + P + Buton Elegant) z-btn z-btn--primary js-loading-btn).
Salvați ca model „Erou cu îndemn la acțiune”.
Cele mai bune practici Gutenberg
Evitați injectarea <span onclick>: folosește blocul Buton (semantică corectă).
În Stiluri de temă (theme.json) definiți variabile de culoare/tip pentru a menține consecvența.
Folosim Bootstrap și Tailwind pentru viteză fără a sacrifica accesibilitatea și consistența. Adăugăm SVG pentru pictograme curate și micro-interacțiuni care nu afectează performanța.
Obiectiv: utilizarea semanticii și utilităților Bootstrap, dar fără a rămâne la „aspectul implicit” . Creăm variații și luăm în considerare cu atenție focalizarea/contrastul.
<!-- 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: stiluri de brand + focalizare vizibilă + siguranță în mișcare
/* 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); }
}
Încărcare rapidă cu Bootstrap (nu este necesar 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>
Objetivo: Mențineți consecvența prin definirea culorilor/razelor în tailwind.config.js și compunem butoane cu clase utilitare. Adăugăm componente cu @apply.
tailwind.config.js (extras)
module.exports = {
theme: {
extend: {
colors: {
brand: {
DEFAULT: '#0E6BA8',
dark: '#09486B',
secondary: '#FF6F61'
}
},
borderRadius: { 'brand': '10px' }
}
}
}
CSS (fișier 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 (Vânt din spate)
<!-- 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>
Încărcător cu Tailwind (ușor, fără dependențe)
<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>
Bune practici:
SVG în linie (ca în exemple): permite moștenirea currentColor, animați cu CSS și evitați solicitări ulterioare.
ADD aria-hidden="true" Dacă pictograma este decorativă; utilizați aria-label/text vizibil dacă comunică o acțiune.
Microinteracțiuni soft: rotație, scalare ușoară, modificări ale opacității. Respectați 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>
Crearea de butoane pentru site-uri web înseamnă și crearea de experiențe incluzive. Un buton accesibil reduce dificultățile, îmbunătățește ratele de conversie și evită problemele legale. Să trecem la treabă.
Contrast minim : 4.5:1 între textul butonului și fundalul său (WCAG AA).
Focalizare vizibilă : dacă navighez cu tastatura (Tab/Shift+Tab) trebuie să văd clar care buton este activ.
Ordine logică a tabelării : accentul trebuie să urmeze fluxul vizual.
/* 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;
}
Dacă este butonul are doar o pictogramă, Adăuga aria-label cu acțiunea (de exemplu, „Deschide căutare”).
Dacă textul este ambiguu („Trimite”), luați în considerare adăugarea context aproape sau aria-describedby.
Evitați repetarea butoanelor cu aceeași etichetă pentru acțiuni diferite în aceeași vizualizare.
<!-- 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>
Folosi <button> pentru acțiuni; <a href> pentru navigare.
Doar ca ultimă soluție, transformați un recipient într-un buton cu role="button" + tabindex="0" + manevrarea tastaturii.
<!-- 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>
Sfat rapid: Testați pagina cu o tastatură. Dacă nu puteți finaliza acțiunea fără mouse, aceasta nu este accesibilă.
Dacă nu măsori, presupui. Etichetează-ți îndemnurile la acțiune, observă comportamentul și îmbunătățește-te cu ajutorul datelor.
Opțiune ușoară fără 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>
Apoi în GA4 Creați evenimentul recomandat (sau personalizat) din event=cta_click și mapezi parametrii.
Începeți cu ceea ce are de obicei cel mai mare impact:
Textul butonului (beneficiu direct vs. acțiune generică).
Poziție (deasupra pliului, lipicios pe mobil, capătul secțiunilor).
Culoare/contrast (dar respectând regulile brandului).
Mini fragment de test foarte simplu (text 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>
Astfel, puteți vedea acum în GA4 ce variantă primește mai multe clicuri.
Folosi <a href> când acțiunea duce la o altă adresă URL (răsfoire sau descărcare). Folosește <button> alin acțiuni (trimiteți formulare, deschideți modale, executați JS). Acest lucru menține semantică corectă, îmbunătățește accesibilitatea și face codul HTML mai clar pentru motoarele de căutare și cititoarele de ecran.
Pentru referință, o suprafață tactilă minimă de 44×44 px (Apple/WCAG). Folosiți o suprafață verticală generoasă (12–16px) și o dimensiune a fontului lizibilă (≥16px). Lăsați spațiu între butoane pentru a preveni atingerile accidentale.
Culoarea singură nu „vinde”, dar contrastul și consecvența da. Asigură-te că butonul principal nu concurează cu alte elemente vizuale. Prioritizează textul (beneficiul) și plasarea (punctul în pâlnie) față de schimbarea de la verde la roșu.
Trei pași:
Folosește etichete semantice (<button>, <a href>).
Asigurați contrastul și focalizarea vizibilă (regulile CSS anterioare).
ADD aria-label numai când textul vizibil nu descrie bine acțiunea (doar pictogramele).
Nu există efect de hover pe mobil , dar încărcătorul și feedback-ul la clicuri sunt de mare ajutor. Acestea reduc anxietatea utilizatorilor și previn clicurile duplicate (erori și frustrare). Sunt mici îmbunătățiri, dar îmbunătățesc experiența utilizatorului și, în consecință, valorile indicatorilor.
Da. Definiți clase și variabile CSS globale (.z-btn, --btn-bg, --btn-radius) și aplicați-le în fiecare machetă. În acest fel obțineți coerență fără a refăcea stilurile în fiecare constructor.
Crearea de butoane pentru site-uri web nu înseamnă doar „adăugarea unei casete colorate”. Este vorba despre proiectarea unor puncte de decizie care leagă intenția de acțiune. Dacă acordați atenție elementelor fundamentale ale UX (suficiență, ierarhie, text și contrast), respectați accesibilitatea , implementați stări și micro-interacțiuni care oferă feedback și măsurați performanța cu date , butoanele dvs. vor înceta să mai fie simple decorațiuni și vor deveni factori puternici de business.
Indiferent dacă lucrați cu HTML/CSS/JS , Elementor, Divi sau Gutenberg , sau dacă vă bazați pe Bootstrap/Tailwind , scopul este același: butoane care sunt instantaneu recunoscute , ușor de înțeles și care oferă încredere . Astfel, clicul vine natural.
Intrări înrudite
