본문으로 건너뛰기
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.