Ir para o conteúdo
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>

Sobre CSS Button Generator

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

Como usar

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

Perguntas frequentes

Free?

Yes.

Uploaded?

No.