LocalTools오프라인 브라우저 도구 모음

분류: 개발 도구

CSS 버튼 생성기

자체 기획 도구찾는 도구가 없나요?

실시간 미리보기와 복사 가능한 코드로 맞춤 CSS 버튼 만들기

버튼을 눈으로 보며 디자인하고 깔끔한 HTML과 CSS를 복사하세요. 색상, 테두리, 모서리, 여백, 그림자, 호버와 포커스 스타일을 브라우저에서 조정합니다.

호버와 포커스

미리보기

미리보기에 마우스를 올리거나 Tab 키로 이동하면 호버와 포커스 스타일을 확인할 수 있습니다.

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

.button:active {
  transform: translateY(0);
}

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

스니펫은 진짜 <button>을 사용하고 :focus-visible 외곽선을 계속 보이게 둡니다. 그 외곽선을 없애면 키보드로 이동하는 사용자는 자신의 위치를 알 수 없게 됩니다.

미리보기와 생성된 코드 모두 브라우저 안에서 만들어집니다.

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

버튼 하나를 위한 시각적 편집기입니다. 색상, 테두리, 모서리, 안쪽 여백, 글자 크기와 굵기, 그림자, 그리고 호버 시 무엇이 바뀌는지. 미리보기는 복사하는 것과 똑같은 CSS로 스타일이 적용되므로, 마우스를 올리거나 Tab으로 이동하면 근사치가 아니라 실제 상태가 보입니다. 두 가지는 우연에 맡기지 않았습니다. 마크업은 스타일을 입힌 div가 아니라 진짜 `<button type="button">`이라 포커스와 키보드 조작이 기본으로 따라옵니다. 그리고 결과물은 항상 눈에 보이는 `:focus-visible` 외곽선을 유지합니다. 생성된 버튼 CSS에서 가장 흔한 접근성 결함이 바로, 키보드 사용자가 페이지 어디에 있는지 알 수 없게 만드는 `outline: none`이기 때문입니다.

사용 방법

  1. 라벨과 클래스 이름을 정하고 배경, 글자, 테두리 색상을 고르세요.
  2. 미리보기가 마음에 들 때까지 모서리, 테두리 두께, 여백, 글자 크기와 굵기를 조정하세요.
  3. 호버 배경과 포커스 링을 설정한 뒤 HTML과 CSS를 복사하세요.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

호버 스타일도 만들 수 있나요?
네. 호버 배경, 선택적인 살짝 올리기, 그림자 변화 모두 생성된 CSS에 별도의 :hover 규칙으로 들어가며 나중에 수정할 수 있습니다.
버튼에 JavaScript가 필요한가요?
아니요. 결과는 순수한 HTML과 CSS입니다. 스크립트는 버튼을 눌렀을 때 무엇을 할지에만 필요합니다.
HTML과 CSS를 따로 복사할 수 있나요?
네. 각각 복사 버튼이 있어서 CSS는 스타일시트로, 마크업은 필요한 자리로 옮길 수 있습니다.
왜 CSS에 포커스 외곽선이 들어 있나요?
그것이 없으면 키보드로 이동하는 사람이 지금 어느 요소에 있는지 볼 수 없기 때문입니다. 생성된 규칙은 :focus-visible을 사용하므로 링은 키보드 포커스에서 나타나고 마우스 클릭마다 나타나지는 않습니다.
생성된 코드는 로컬에 머무나요?
네. 모든 설정과 미리보기, 생성된 스니펫이 브라우저 안에 남습니다.

전체 도구로 돌아가기