당신의 스타일을 찾으세요. 나만의 것으로 만드세요. 코드를 가져가세요.
버튼을 시각적으로 스타일링하고 웹사이트에서 사용할 HTML 및 CSS을 가져오세요. 프리셋으로 시작하여 타이포그래피, 색상, 모양, 그림자를 조정하고 내보내기 전에 상호작용 상태를 미리 확인하세요.
Everyday, Classic, Shaped, Expressive, Gradients, Elite 컬렉션 전반에 걸쳐 44 프리셋을 둘러보세요. 모든 프리셋은 편집 가능한 시작점입니다.
스타일 컬렉션을 사용하여 갤러리를 좁히세요. 프리셋을 적용하면 버튼 텍스트와 클래스 이름은 유지되면서 기본 스타일과 호버 스타일이 모두 교체됩니다.
단순한 단색 채우기, 둥근 모서리, 깔끔한 외곽선 또는 더 장식적인 처리를 시도해 보세요. 방향을 정했다면 다른 탭을 사용하여 페이지에 맞게 세부 사항을 조정하세요.
버튼 텍스트, 글꼴, 크기, 굵기, 간격, 줄 높이, 정렬 및 텍스트 색상을 설정하세요. 작업하면서 라벨이 업데이트되는 모습을 확인하세요.
텍스트에는 글꼴 컨트롤과 두 번째 버튼 텍스트 필드가 포함되어 있습니다. 글꼴 크기는 10에서 80 px까지 설정할 수 있으며, 나열된 글꼴은 방문자의 기기에서 사용할 수 있는 글꼴입니다.
동작을 설명하는 짧은 라벨을 사용하세요. 채우기(Fill)에서 가로 및 세로 패딩을 사용하면 글꼴 크기를 변경하지 않고도 주변 공간을 추가할 수 있습니다. 버튼이 사용될 페이지에서 더 긴 라벨을 확인하세요.
단일 배경색을 사용하거나 선형 그라데이션으로 두 가지 색상을 혼합하세요. 색상 선택기와 16진수 입력을 통해 시각적으로 또는 정밀하게 작업할 수 있습니다.
채우기(Fill)에서 채우기 스타일을 선형 그라데이션으로 변경하여 두 번째 색상과 그라데이션 각도를 표시하세요. 각도는 0에서 360도까지 설정할 수 있습니다.
16진수 필드는 6자리 전체 색상 코드나 3자리 약어를 허용합니다. 그라데이션의 양쪽 끝에서 흰색 또는 유색 라벨을 테스트하세요. 스튜디오는 텍스트 대비를 자동으로 인증하지 않습니다.
연결되거나 독립적인 모서리, 테두리 너비 및 스타일, 상자 그림자, 텍스트 그림자를 조정하세요. 컨텍스트에 맞는 모양을 버튼에 부여하세요.
모양(Shape)에서 '모든 모서리 연결'을 켜면 하나의 공유 반경이 설정되고, 끄면 각 모서리를 개별적으로 설정할 수 있습니다. 테두리 스타일에는 실선, 파선, 점선, 이중선, 안쪽, 바깥쪽, 융기, 홈 및 없음이 포함됩니다.
그림자(Shadow)에서 가로 및 세로 오프셋, 흐림, 색상 및 불투명도를 설정하세요. 상자 그림자에는 확산 및 안쪽 스위치도 있습니다. 텍스트 그림자는 별도로 제공되므로 버튼 외곽선을 변경하지 않고도 라벨에 깊이를 더할 수 있습니다.
기본(Default) 및 호버(Hover) 스타일을 별도로 편집하세요. 기본, 호버, 활성 상태의 모양을 미리 보고 밝은 캔버스와 어두운 캔버스에서 버튼을 비교하세요.
편집 상태는 컨트롤이 변경할 스타일을 선택합니다. 캔버스 상태 버튼은 미리보기만 선택합니다. 미리보기에 마우스를 올리거나 누르면 상호작용도 표시됩니다.
기본값과 일치하는 호버 값은 사용자 지정될 때까지 기본 편집 내용을 따릅니다. 내보낸 CSS에는 필요할 때 호버 규칙, 포커스 표시 윤곽선, 활성 상태의 움직임, 동작 감소 규칙이 포함됩니다.
생성된 CSS와 일치하는 HTML 버튼을 복사하거나 스타일시트를 다운로드하세요. 클래스 이름이 두 요소를 연결합니다.
고유한 클래스 이름을 선택하고 탭에서 CSS를 복사한 다음 HTML에서 버튼을 복사하세요. 다운로드 시 클래스 이름을 딴 .css 파일이 저장되며, 전체 웹페이지가 다운로드되지는 않습니다.
미리보기 및 코드 생성은 브라우저에서 실행됩니다. 스튜디오는 이 브라우저의 로컬 저장소에 하나의 초안을 기억하려고 시도합니다. 보관하려는 모든 항목은 내보내세요. 재설정을 누르면 스튜디오가 시작 스타일로 돌아갑니다.
업로드가 필요하지 않습니다. JavaScript가 브라우저에서 라이브 편집기를 구동합니다. HTML과 CSS를 각각 복사하거나 CSS 스타일시트를 다운로드하세요. 생성된 폰트 스택은 뷰어의 기기에서 사용 가능한 폰트를 사용합니다.
