跳转到正文
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>

关于CSS Button Generator

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

使用方法

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

常见问题

Free?

Yes.

Uploaded?

No.