Saltar al contenido
btn

CSS Button Generator

Generate button HTML/CSS.

<button class="tb-btn" type="button">Button</button>

<style>
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: #6366f1;
  border: 0px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);
}
.tb-btn:hover {
  background: #4f46e5;
}
.tb-btn:active {
  transform: translateY(1px);
}
.tb-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
</style>

Acerca de CSS Button Generator

Assemble button styles with hover and focus, preview live. Everything runs in your browser.

Cómo usarla

  1. Set colors and label
  2. Check the preview
  3. Copy CSS

Preguntas frecuentes

Free?

Yes.

Uploaded?

No.