이 예제는 생성기의 컨트롤만 사용합니다. 위의 이미지는 편집기의 스크린샷이 아니라 일반 HTML 버튼에 적용된 실제 다운로드된 스타일시트를 보여줍니다.
Signature로 시작
CSS 버튼 생성기를 엽니다. 프리셋에서 Everyday 컬렉션의 Signature를 선택하세요. 버튼 텍스트를 “Get started”로 설정합니다. 코드 영역에서 클래스 이름을 cta-button으로 설정하세요.
프리셋은 기본 및 호버 스타일을 대체하지만 라벨과 클래스 이름은 유지됩니다. 세부 조정을 하기 전에 시작점을 선택하세요.
클래스 이름은 CSS 규칙을 HTML 버튼에 연결합니다. 생성기는 지원되지 않는 문자를 정리합니다. 관련 없는 요소의 스타일이 변경되지 않도록 짧고 고유한 이름을 사용하세요.
그라데이션 알약 만들기
편집 상태를 기본(Default)으로 유지하세요. 텍스트에서 System sans를 선택하고 글꼴 크기는 18 px, 굵기는 Bold로 설정하세요. 흰색 텍스트 색상, 일반 스타일, 중앙 정렬, 줄 높이 1.4을 유지하세요.
채우기(Fill)에서 선형 그라데이션을 선택하세요. 아래의 두 가지 색상과 각도를 사용하세요. 가로 패딩을 32 px, 세로 패딩을 16 px로 설정하세요. 모양(Shape)에서 모든 모서리 연결을 활성화하고 모서리 반경을 100 px로 설정하세요. 테두리 두께는 0 px로 유지됩니다.
그림자(Shadow)에서 박스 그림자를 활성화하세요. 가로 오프셋 0 px, 세로 오프셋 8 px, 흐림 24 px, 확산 −4 px, 색상 #460BD8, 불투명도 32%를 사용하세요. 내부 그림자와 텍스트 그림자는 끄세요.
패딩은 텍스트 주변의 공간을 변경합니다. 모서리 반경은 윤곽선을 변경합니다. 큰 반경은 라벨을 더 넓게 만들지 않고도 이 알약 모양을 만듭니다.
호버에 별도의 처리 적용
편집 상태를 호버(Hover)로 전환하세요. 채우기에서 배경색을 #33099E로, 두 번째 색상을 #6D20BF로 변경하세요. 그라데이션 각도는 135°로 유지하세요. 그림자에서 세로 오프셋을 10 px, 흐림을 28 px로 변경하세요. 다른 설정은 그대로 두세요.
캔버스의 기본, 호버, 활성 버튼을 사용하여 각 상태를 검사하세요. 미리보기 버튼 위로 마우스를 올리거나 클릭할 수도 있습니다. 캔버스를 밝은 모드와 어두운 모드로 전환하여 가장자리와 그림자를 검토하세요.
편집 상태는 변경할 스타일을 선택합니다. 캔버스 상태는 미리보기 내용만 변경합니다. 휴식 상태의 모양을 조정하기 전에 기본 편집 상태로 돌아가세요.
기본값과 일치하는 호버 속성은 이후의 기본 편집 내용을 따릅니다. 호버 속성을 사용자 지정하면 독립적으로 유지됩니다. 기본 스타일을 변경한 후 두 상태를 모두 다시 확인하세요.
내보내기 및 페이지에서 테스트
CSS 탭을 선택하고 CSS 복사를 사용하거나, 다운로드를 선택하여 cta-button.css를 저장하세요. HTML 탭을 선택하고 일치하는 버튼 마크업을 복사하세요. HTML에는 동일한 클래스 이름과 type="button"인 버튼이 포함되어 있습니다.
CSS를 스타일시트에 추가하거나 페이지에서 다운로드한 파일을 연결하세요. 버튼이 위치할 곳에 HTML을 배치하세요. 두 가지 내보내기 항목은 함께 작동합니다. HTML 버튼만으로는 스타일이 포함되지 않습니다.
페이지를 열고 기본, 호버, 키보드 포커스 및 눌림 상태를 테스트하세요. 내보내기에는 포커스 표시 윤곽선, 작은 활성 움직임, 동작 감소 규칙이 포함됩니다. 주변 스타일과 설치된 폰트가 결과에 영향을 줄 수 있습니다.
생성된 버튼은 스타일이 지정된 컨트롤입니다. 프로젝트에서 클릭 동작을 연결하고, 폼에 추가할 때는 올바른 버튼 유형을 사용하세요.
cta-button.css
다운로드한 파일 이름은 클래스 이름을 따릅니다.
자주 묻는 질문
CSS 프레임워크가 필요한가요?
아니요. 출력물은 표준 CSS와 일반 HTML 버튼입니다. CSS를 자신의 스타일시트에 붙여넣고 버튼에 일치하는 클래스를 사용하십시오.
다운로드하면 HTML도 저장되나요?
다운로드는 클래스 이름을 딴 .css 파일을 저장합니다. HTML 탭에서 버튼 마크업을 별도로 복사하십시오.
각 모서리에 다른 반지름을 줄 수 있나요?
네. 모양(Shape)에서 '모든 모서리 연결(Link all corners)'을 끄고 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래를 각각 독립적으로 설정하십시오. 이 예시는 알약 모양을 위해 연결된 상태를 유지합니다.
다음번에 방문해도 내 디자인이 그대로 남아있나요?
스튜디오는 현재 초안을 이 브라우저의 로컬 저장소에 저장하려고 시도합니다. 이는 계정이나 기기 간 백업이 아닙니다. 브라우저 설정, 사이트 데이터 삭제 또는 재설정 시 삭제되거나 대체될 수 있으므로 보관하려는 작업물은 내보내기 하십시오.
내 버튼이 서버에 업로드되나요?
스타일링 미리보기 및 CSS/HTML 생성은 브라우저 내에서 실행됩니다. 편집기는 내보내기를 생성하기 위해 버튼 텍스트나 스타일링 초안을 업로드하지 않습니다.
다음 버튼에 나만의 스타일을 입혀보세요.
시작점을 선택하고 세부 사항을 조정한 다음 코드를 프로젝트에 가져오십시오.