> For the complete documentation index, see [llms.txt](https://cdbd.gitbook.io/guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cdbd.gitbook.io/guide/editor/link.md).

# 버튼

CdBd 에디터의 버튼 카드는 여러분의 페이지를 방문하는 사람들을 특정 웹사이트로 연결하거나 전화 연결, 이메일 전송 등을 할 수 있게 하는 특별한 도구예요. 멋진 버튼을 만들고 꾸미는 모든 방법을 지금부터 친절하게 알려드릴게요!

***

## 1. 버튼 카드 추가하고 연결 옵션 선택하기

먼저, 페이지에 버튼 카드를 추가하고, 연결 옵션을 선택해 볼까요?

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2F6pJbVai1wKEn5UdzottZ%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-11-24%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.01.55.png?alt=media&amp;token=a2f5d069-4fde-4484-b184-6fa104612e6f" alt=""><figcaption></figcaption></figure>

### 1.1 URL 열기

* 버튼 카드를 터치했을때 방문자가 이동할 웹 주소(URL)를 입력해요.
* 링크를 연결할 때, URL 주소는 'http', 'http\://', 'www' 등의 앞 부분을 포함하지 않아도 자동으로 연결됩니다.

### 1.2 전화하

* 버튼 카드를 터치했을때 스마트폰의 전화 앱을 불러와 지정한 번호로 전화 연결을 할 수 있어요.
* 국가 번호를 선택하고 전화번호를 입력하면 되며, -를 입력해도 됩니다.

### 1.3 문자 보내기

* 버튼 카드를 터치했을때 스마트폰의 문자 앱을 불러와 지정한 번호로 메시지를 보낼 수 있어요.
* 메시지 전송시 미리 텍스트를 입력시켜 페이지 방문자가 쉽게 문자를 보내게 할 수 있어요. 예를 들어, 상담을 위한 전화 요청 문자일 경우 '안녕하세요. 상담 요청 드립니다. 가능하신 시간에 전화 부탁드려요' 와 같은 메시지를 입력해 놓으면 페이지 방문자가 손쉽게 문자 메시지를 보낼 수 있답니다.

### 1.4 이메일 보내기

* 버튼 카드를 터치했을때 스마트폰의 이메일 앱을 불러와 지정한 이메일 주소로 메일 보낼 수 있어요.
* 메시지 전송시 미리 내용을 입력시켜 페이지 방문자가 쉽게 메일을 보내게 할 수 있어요. 예를 들어, 상담을 위한 연락 요청 메일일 경우 '안녕하세요. 상담 요청 드립니다. 가능하신 시간에 연락 부탁드려요' 와 같은 메일 내용을 입력해 놓으면 페이지 방문자가 손쉽게 이메일을 보낼 수 있답니다.

### 1.5 연락처 저장하기

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FVgph0mGoYIFx4tn48NDo%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-11-24%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.51.08.png?alt=media&amp;token=915e4055-667c-47cb-8758-a41a03417feb" alt=""><figcaption></figcaption></figure>

* 버튼 카드를 터치했을때 스마트폰의 연락처 앱에 연락처 정보를 저장하게 할 수 있어요.
* 이름, 휴대폰번호, 회사명, 부서, 직책, 이메일 등 연락처 입력한에 추가 가능한 정보들을 추가하고, 페이지 방문자가 해당 버튼을 터치하면 스마트폰 연락처에 해당 연락처 정보가 저장됩니다.
* 모바일 명함으로 이용하기에 매우 적합한 버튼 옵션이에요.

***

## 2. 버튼 디자인 예쁘게 꾸미기

버 카드를 선택한 후, 디자인 공간으로 가면 링크 버튼의 모양과 스타일을 다양하게 꾸밀 수 있는 설정들이 나타나요. 내 페이지에 딱 맞는 멋진 버튼을 만들어 보세요!

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2F0S7U6nTFQn8utccEXSFn%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-11-24%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.05.17.png?alt=media&amp;token=459c4ee5-ee5d-4da2-baff-b66816db78be" alt=""><figcaption></figcaption></figure>

### 2.1 버튼 모양 바꾸기

* 버튼의 형태를 다양하게 선택할 수 있어요.
* 각진 모양 : 깔끔하고 단정한 느낌을 줍니다.
* 둥근 모양 : 부드럽고 친근한 느낌을 줍니다.
* 원형 모양 : 독특하고 시선을 끄는 느낌을 줄 수 있어요

### 2.2 버튼 색깔 바꾸기

* 버튼의 배경 색깔을 원하는 대로 바꿀 수 있어요. 페이지의 전체적인 디자인과 잘 어울리게 선택해 보세요.

### 2.3 버튼 글씨 꾸미기

* 버튼 위에 나타나는 글씨(링크 이름)의 모양도 바꿀 수 있어요.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FsSkERIM6BNew2ZPpGcoV%2F%E1%84%85%E1%85%B5%E1%86%BC%E1%84%8F%E1%85%B3%20%E1%84%87%E1%85%A5%E1%84%90%E1%85%B3%E1%86%AB%20%E1%84%89%E1%85%A5%E1%84%8E%E1%85%A6.gif?alt=media&amp;token=a0d1554b-ca69-4543-85bb-086866c11b75" alt=""><figcaption></figcaption></figure>

* 글씨체 변경 : 원하는 텍스트 서체를 선택할 수 있어요.
* 글씨 크기 조절 : 버튼 안의 글씨 크기를 조절하여 가독성을 높일 수 있습니다.

### 2.4 버튼에 이미지 넣기

버튼에 이미지를 적용 후 가로 버튼형, 카드형, 배경형 3가지 레이아웃 중에 원하는 스타일을 적용할 수 있어요.&#x20;

* 가로 버튼형 : 왼쪽에 이미지 + 오른쪽에 텍스트
* 카드형 : 상단에 이미지 + 하단에 텍스트
* 배경형 : 텍스트 뒤에 이미지
* 이미지 비율 조절 : 넣은 이미지의 가로세로 비율을 조절하여 버튼에 알맞게 보이도록 할 수 있답니다.

<figure><img src="https://3649876096-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPTEfwZzXmifaBzg2guGf%2Fuploads%2FM0ovxTPqufRSd666KkK3%2F%E1%84%85%E1%85%B5%E1%86%BC%E1%84%8F%E1%85%B3%20%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%8B%E1%85%B2%E1%84%92%E1%85%A7%E1%86%BC.gif?alt=media&amp;token=ac49ccae-d101-4cf6-bc3b-5e534587cbae" alt=""><figcaption></figcaption></figure>

### 2.5 테두리/여백 추가

* 버튼에 테두리를 넣거나 주변 여백을 조절해서 페이지에서 더욱 돋보이게 꾸밀 수 있어요.