MagicKit.ai

버튼 생성기

호버 효과, 그라데이션, 그림자, 애니메이션이 있는 아름다운 CSS 버튼을 만드세요. 색상, 테두리, 패딩을 커스터마이징하고 프로덕션 준비된 CSS 코드를 복사하세요.

색상

타이포그래피

16px

간격

24px
12px

테두리

0px
8px
200ms

효과를 보려면 마우스를 올리세요

/* Button Styles */
.button {
  background-color: #3b82f6;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 200ms ease;
  cursor: pointer;
}

.button:hover {
  background-color: #2563eb;
}

관련 도구

🔒 즉시 결과, AI보다 빠름. 가입 불필요. 100% 프라이버시.