버튼은 “Book a demo”, “Visit our website”, “Download our app”처럼 클릭 가능한 콜 투 액션이에요. 시각적으로 눈에 띄어 가장 중요한 링크로 클릭을 유도해요.
버튼 내용
| 설정 | 기능 |
|---|
| Text | 버튼에 표시되는 라벨 |
| Link | 버튼을 클릭했을 때 연결되는 URL |
스타일
| 설정 | 기능 |
|---|
| Type | Plain(단색 배경) 또는 Stroke(투명 배경에 외곽선만) |
| Color | 버튼 배경 색상(Plain) 또는 테두리 색상(Stroke) |
| Border radius | 모서리 둥글기: 각진 모서리는 0, 값이 클수록 둥근 모서리 |
| Color presets | 그라데이션과 단색 프리셋에서 빠르게 선택해 손쉽게 스타일링 |
“Book a demo”처럼 기본 콜 투 액션에는 브랜드 색상으로 Type → Plain을 사용하세요. 보이되 덜 두드러지게 하고 싶은 보조 동작에는 Type → Stroke를 사용하세요.
텍스트 스타일
버튼 라벨 텍스트의 글꼴, 크기, 색상, 불투명도, 줄 높이, 서식 옵션이에요.
버튼의 Width(너비)와 Height(높이)를 픽셀 단위로 설정하세요.
레이아웃
패딩은 버튼 블록 주변의 공간을 조절해요.