Generator butoane CSS

Exemple de butoane CSS

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Buton principal Albastru plin, cu umbră colorată; pentru acțiunea principală de pe pagină.

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: #2563eb;
  border: 2px solid #2563eb;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
  background: #1f54c8;
  border-color: #1f54c8;
}

Buton secundar (contur) Doar marginea colorată; la hover se umple.

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #2563eb;
  background: transparent;
  border: 2px solid #2563eb;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
  color: #ffffff;
  background: #2563eb;
}

Buton gradient Două culori și un efect de ridicare la hover.

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border: 2px solid transparent;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

Pastilă Colțuri complet rotunjite, pentru etichete și acțiuni rapide.

.btn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: #16a34a;
  border: 2px solid #16a34a;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
  background: #138b3f;
  border-color: #138b3f;
}

Call to action mare Mai mare și mai gros, pentru înscrieri și cumpărături.

.btn {
  display: inline-block;
  padding: 18px 36px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  background: #f97316;
  border: 2px solid #f97316;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4);
}

Buton discret Gri deschis, fără umbră, pentru acțiuni puțin importante.

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #0f172a;
  background: #e2e8f0;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
  background: #c0c5cc;
  border-color: #c0c5cc;
}

Cum folosești generatorul de butoane

Scrie textul butonului și alege stilul: plin, contur sau gradient.
Alege culoarea (sau culorile, pentru gradient) de fundal și culoarea textului.
Reglează padding-ul orizontal și vertical, border-radius, mărimea și grosimea fontului.
Bifează umbra dacă o vrei și alege efectul la hover: mai închis, se ridică sau, pentru butonul cu contur, umplere.
Copiază codul: primești .btn, .btn:hover, .btn:focus-visible și .btn:active.

Stările unui buton

Un buton bun arată diferit când treci cu mouse-ul peste el (:hover), când e apăsat (:active) și când e selectat de la tastatură (:focus-visible). O tranziție scurtă face schimbarea mai lină.

.btn {
  padding: 12px 24px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.btn:hover {
  background: #1d4ed8;
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

Accesibilitate

Nu elimina conturul de focus cu outline: none fără să pui altceva în loc. :focus-visible afișează conturul doar când utilizatorul navighează cu tastatura, nu și la clic cu mouse-ul, și este suportat de toate browserele moderne.

Butonul trebuie să fie ușor de atins pe telefon. WCAG 2.2 cere la nivelul AA o țintă de cel puțin 24×24 pixeli CSS, iar 44×44 este dimensiunea recomandată (nivelul AAA și ghidurile Apple). Verifică și contrastul dintre text și fundal.

Folosește elementul <button> pentru acțiuni și <a> pentru linkuri; clasa .btn poate stiliza la fel pe amândouă. cursor: pointer nu e pus implicit pe butoane, de aceea apare în cod.

Întrebări frecvente

De ce butonul meu cu link nu are aceeași înălțime?

<a> este element inline. Adaugă display: inline-block (sau inline-flex) ca padding-ul vertical să fie respectat.

Cum fac un buton dezactivat?

Folosește atributul disabled și stilizează .btn:disabled, de exemplu cu opacity: 0.5 și cursor: not-allowed.