Skip to content
btn

CSS Button Generator

Generate a complete button style block.

<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>

About CSS Button Generator

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

How to use

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

FAQ

Free?

Yes.

Uploaded?

No.