무료 CSS 버튼 생성기

Erstellen Sie ansprechende, responsive Schaltflächen für Ihre Website. Wählen Sie aus über 70 vorgefertigten Stilen oder passen Sie Ihre eigenen mit unseren erweiterten Steuerelementen an.

버튼 미리보기

생성된 CSS

.custom-button { padding: 0.75rem 1.5rem; border-radius: 0.5rem; background: #165DFF; color: white; font-weight: 500; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; }  .custom-button:hover { background: rgba(22, 93, 255, 0.9); transform: translateY(-2px); }  .custom-button:focus { outline: none; box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.3), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }  .custom-button:active { transform: translateY(0); }

Button 속성

인기 있는 프리셋

Related Tools

스타일러스를 CSS로 변환

SCSS 코드를 CSS로 변환합니다. 빠르고, 쉽고, 안전합니다.

CSS3 전환 생성기

부드러운 불투명도 전환

완벽한 Flexbox 레이아웃 만들기

직관적인 드래그 앤 드롭 인터페이스를 사용하여 CSS flexbox 코드를 시각화, 사용자 정의 및 생성할 수 있습니다.

Word to Number 변환기

쓰여진 숫자를 여러 언어로 된 숫자로 변환

HTML 인코딩 도구

브라우저에서 바로 텍스트를 HTML 엔터티로 쉽게 인코딩할 수 있습니다. 개발자와 콘텐츠 제작자에게 적합합니다.

JSON 축소

축소된 JSON은 데이터 크기를 줄여 네트워크를 통해 더 빠르게 전송할 수 있습니다