티스토리 링크 버튼 만드는 방법 – 클릭을 부르는 블로그 버튼 만들기

티스토리 블로그에서 다른 글이나 외부 사이트로 이동하는 링크 버튼을 만드는 방법은 생각보다 쉽고, 클릭률 향상에도 매우 효과적입니다.
단순한 텍스트 링크보다 디자인된 버튼 링크는 방문자의 주의를 끌고, 콘텐츠 흐름도 부드럽게 연결할 수 있습니다.

이 글에서는 티스토리에서 사용 가능한 링크 버튼 만드는 방법 2가지를 단계별로 소개합니다.

• 방법 1: HTML/CSS 코드로 직접 버튼 만들기
• 방법 2: 이미지 버튼 활용하여 링크 만들기

블로그에 사용할 버튼 스타일 예시와 클릭 유도를 높이는 실전 팁도 함께 확인하세요!

 

 

1. 링크 버튼이 필요한 이유

 

보통 블로그 글 안에 링크를 삽입할 때 텍스트로만 표시하는 경우가 많습니다. 하지만 이런 링크는 시각적으로 눈에 띄지 않아 클릭률이 낮을 수 있습니다. 반면 아래처럼 버튼 형태로 표시하면 사용자의 주의를 끌 수 있습니다.

 

 

 

 

링크 버튼의 장점:

• 클릭률 향상
• 시선 집중
• UX 개선
• 중요한 안내 강조 가능

 

 

2. HTML/CSS로 링크 버튼 만들기

HTML과 CSS만으로 깔끔한 버튼을 만들 수 있습니다.

 

 

아래 코드를 복사해 글쓰기 화면에서 HTML 모드로 붙여넣으면 바로 적용됩니다.

 

 

HTML

<p style="text-align: center;">
  <a href="https://example.com" target="_blank" class="myButton">자세히 보기</a>
</p>

<style>
.myButton {
  background-color: #ffc107;
  color: #fff;
  font-weight: bold;
  padding: 12px 30px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: 0.2s;
}
.myButton:hover {
  background-color: #e0a800;
}
</style>

 

• href : 연결할 주소(URL)를 입력
• target="_blank" : 새 창으로 열기
• 자세히 보기 : 버튼 안 텍스트

TIP: 글쓰기 화면에서 "HTML" 모드로 전환한 후 붙여넣어야 코드가 정상 작동합니다.

 

 

 

 

3. 버튼 디자인 자유롭게 바꾸기

위에서 보여드린 버튼은 노란색 원형 스타일입니다. 원하는 색상, 테두리, 그림자 등을 바꿔 다양한 분위기를 연출할 수 있습니다.

 

 

예를 들어 블루 계열로 바꾸고 싶다면?

 

 

CSS

.myButton {
  background-color: #007bff;
}
.myButton:hover {
  background-color: #0056b3;
}

 

 

 

추천 색상 코드:

• 초록색: #28a745
• 회색: #6c757d
• 주황색: #fd7e14
• 빨간색: #dc3545

디자인에 맞춰 색상을 조정해보세요!

 

 

 

4. 이미지 버튼으로 링크 만드는 방법

HTML 코드가 어렵게 느껴진다면, 이미지로 버튼처럼 보이게 만든 뒤 링크를 걸 수도 있습니다.

순서:

1. 버튼 모양의 이미지 제작 (예: Canva, 포토샵)
2. 글쓰기 화면에서 이미지 업로드
3. 이미지 클릭 → 링크 아이콘 선택 → URL 입력
4. ‘새 창에서 열기’ 옵션 체크

장점: 직관적인 디자인, HTML 몰라도 가능
단점: 모바일 환경에서 이미지 로딩 시간이 다소 길어질 수 있음

 

 

 

 

5. 버튼 활용 꿀팁: 글 사이 링크 유도

블로그 글 중간중간에서 사용자의 시선을 끌고 싶을 때 버튼을 활용해 보세요.

예시:

 

HTML

<p style="text-align: center;">
  <a href="https://내블로그/post1" class="myButton">[1탄] 블로그 글쓰기 구조</a>
</p>

 

 

6. 클릭을 부르는 링크 버튼 실전 팁

• 중앙 정렬로 강조 효과
  → <p style="text-align: center;"> 활용
• 명확한 행동 유도 문구 사용
  → 예: [지금 확인하기], [무료 다운로드], [1분 요약 보기]
• 모바일에서도 크기 적당하게 조절
  → padding 값 10~15px 적정
• 불필요한 강조는 피하기
  → 너무 많은 버튼은 오히려 방해가 됩니다.

 

 

7. 마무리: 블로그 UX와 CTR을 동시에 올리는 전략

링크 버튼 하나로 블로그의 분위기, 사용자 경험, 클릭률이 모두 달라질 수 있습니다. 특히 중요한 글 유도, 광고, 제휴 링크, 외부 콘텐츠 연결 등에서 효과는 더 커집니다. 처음에는 복사해서 붙여넣는 방식으로 시작해 보세요. 익숙해지면 CSS를 커스터마이징하여 브랜드 스타일에 맞는 버튼도 만들 수 있습니다.