티스토리 링크버튼 만들기 (말랑말랑버전 공유)

티스토리 블로그를 더 예쁘게! 말랑말랑한 링크버튼으로 감성 한 스푼♥

 

안녕하세요, 블로그 이웃님들 😊 여러분 혹시 티스토리 글 쓸 때 이런 고민 해보신 적 있으세요? "링크를 달고 싶은데, 평범한 텍스트 링크는 좀 아쉽다..." 저도 예전에는 단순히 https://로 연결하곤 했는데요, 요즘은 블로그 꾸미기에 재미를 붙이다 보니 예쁜 버튼 하나만으로도 분위기가 확 달라지는 걸 느끼게 됐어요! 그래서 오늘은 제가 자주 사용하는 말랑말랑 젤리 스타일 링크버튼을 공유해보려 해요. 핑크, 민트, 라벤더 등 다양한 컬러와 애니메이션 효과까지 더해져 한눈에 보기에도 너무 예쁘고, 클릭 유도에도 효과적이더라구요ㅎㅎ 특히 티스토리 초보 분들이 쉽게 따라 할 수 있게 복붙만 해도 바로 사용 가능한 HTML 코드까지 준비했으니 끝까지 꼼꼼하게 읽어보시면 꼭 도움이 되실 거예요!

📋 목차

1. 말랑한 링크버튼이 뭐예요?
2. 버튼 디자인 종류는 어떤 게 있나요?
3. 티스토리에 적용하는 방법은?
4. 색상별 버튼 미리보기
5. 자주 묻는 질문 (FAQ)

1. 말랑한 링크버튼이 뭐예요?

말랑한 링크버튼은 말 그대로 젤리처럼 말랑거리는 애니메이션 효과가 들어간 귀엽고 컬러풀한 버튼이에요. 그냥 링크 텍스트보다 훨씬 시선을 끌고, 티스토리 블로그의 감성 디자인에도 찰떡궁합이죠! 특히 CSS 애니메이션 중 @keyframes jelly를 활용해서 부드럽게 흔들리는 효과가 추가되니까, 클릭 유도에 더 효과적이에요. 이런 버튼 하나만으로도 글의 완성도가 달라진답니다.

2. 버튼 디자인 종류는 어떤 게 있나요?

제가 만든 말랑버튼은 총 5가지 색상이에요. 각각 이름도 귀엽게 지었답니다ㅎㅎ 어떤 느낌인지 한눈에 비교해볼까요?

버튼 이름	컬러 코드	느낌
말랑한 핑크	#f06292	달달하고 사랑스러워요
시원한 민트	#26c6da	청량하고 산뜻해요
부드러운 라벤더	#ba68c8	잔잔하고 우아해요
상큼한 옐로우	#fdd835	톡톡 튀고 밝아요
따뜻한 오렌지	#ff8a65	기분 좋아지는 컬러

어떤가요? 컬러만 봐도 기분이 좋아지지 않나요? 이제 다음으로는 이 버튼들을 티스토리에 어떻게 적용하는지 알려드릴게요!

3. 티스토리에 적용하는 방법은?

적용 방법은 정말 쉬워요! 딱 두 단계만 기억하면 돼요.

• 1단계: 블로그 글쓰기 HTML 모드에서 버튼 코드 복사하기 (주소 및 문구 수정)

혹시 HTML 모드를 잘 모르시겠다면? 글쓰기 화면 오른쪽 상단의 ‘HTML’ 탭을 클릭하시면 돼요! 그 안에다가 아래 코드처럼 붙여넣으면 끝이에요. 예시로 핑크버튼을 소개드릴게요

🍬 말랑한 핑크

<style>

@keyframes jelly {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.05, 0.95); }
  50% { transform: scale(0.95, 1.05); }
  70% { transform: scale(1.02, 0.98); }
}
.jelly-button {
  display: inline-block;
  background-color: #f06292;
  color: white !important;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
  font-family: 'Pretendard', sans-serif;
  animation: jelly 2s infinite ease-in-out;
  transition: transform 0.3s;
}
</style>
<div style="text-align: center;">
  <a href="https://example.com" class="jelly-button" target="_blank">🍬 말랑한 핑크</a>
</div>

색상별로 코드를 바꾸는 방법은 다음 섹션에서 더 자세히 보여드릴게요!

4. 색상별 버튼 미리보기

각 버튼이 실제로 어떻게 보이는지 궁금하셨죠? 아래는 직접 사용할 수 있는 HTML 예시를 컬러별로 보여드릴게요. 링크 주소만 바꾸시면 바로 사용 가능해요.

🍬 말랑한 핑크

<style>
@keyframes jelly-pink {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.05, 0.95); }
  50% { transform: scale(0.95, 1.05); }
  70% { transform: scale(1.02, 0.98); }
}
.jelly-button-pink {
  display: inline-block;
  background-color: #f06292;
  color: white !important;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
  font-family: 'Pretendard', sans-serif;
  animation: jelly-pink 2s infinite ease-in-out;
  transition: transform 0.3s;
}
</style>
<div style="text-align: center;">
  <a href="https://example.com" class="jelly-button-pink" target="_blank">🍬 말랑한 핑크</a>
</div>

🍃 시원한 민트

🍃 시원한 민트

<style>
@keyframes jelly-mint {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.05, 0.95); }
  50% { transform: scale(0.95, 1.05); }
  70% { transform: scale(1.02, 0.98); }
}
.jelly-button-mint {
  display: inline-block;
  background-color: #26c6da;
  color: white !important;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
  font-family: 'Pretendard', sans-serif;
  animation: jelly-mint 2s infinite ease-in-out;
  transition: transform 0.3s;
}
</style>
<div style="text-align: center;">
  <a href="https://example.com" class="jelly-button-mint" target="_blank">🍃 시원한 민트</a>
</div>

 부드러운 라벤더

<style>
@keyframes jelly-lavender {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.05, 0.95); }
  50% { transform: scale(0.95, 1.05); }
  70% { transform: scale(1.02, 0.98); }
}
.jelly-button-lavender {
  display: inline-block;
  background-color: #ba68c8;
  color: white !important;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
  font-family: 'Pretendard', sans-serif;
  animation: jelly-lavender 2s infinite ease-in-out;
  transition: transform 0.3s;
}
</style>
<div style="text-align: center;">
  <a href="https://example.com" class="jelly-button-lavender" target="_blank">🪻 부드러운 라벤더</a>
</div>

🌞 상큼한 옐로우

<style>
@keyframes jelly-yellow {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.05, 0.95); }
  50% { transform: scale(0.95, 1.05); }
  70% { transform: scale(1.02, 0.98); }
}
.jelly-button-yellow {
  display: inline-block;
  background-color: #fdd835;
  color: #333 !important;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
  font-family: 'Pretendard', sans-serif;
  animation: jelly-yellow 2s infinite ease-in-out;
  transition: transform 0.3s;
}
</style>
<div style="text-align: center;">
  <a href="https://example.com" class="jelly-button-yellow" target="_blank">🌞 상큼한 옐로우</a>
</div>

🍊 따뜻한 오렌지

🍊 따뜻한 오렌지

<style>
@keyframes jelly-orange {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.05, 0.95); }
  50% { transform: scale(0.95, 1.05); }
  70% { transform: scale(1.02, 0.98); }
}
.jelly-button-orange {
  display: inline-block;
  background-color: #ff8a65;
  color: white !important;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
  font-family: 'Pretendard', sans-serif;
  animation: jelly-orange 2s infinite ease-in-out;
  transition: transform 0.3s;
}
</style>
<div style="text-align: center;">
  <a href="https://example.com" class="jelly-button-orange" target="_blank">🍊 따뜻한 오렌지</a>
</div>

이렇게 복붙만 해도 예쁘게 꾸며져요. 말랑 말랑한 효과가 있어서 눈길에 끌고 유도 하기 좋은 링크버튼이에요.

5. 자주 쓰는 버튼 활용 팁

이런 버튼, 어떤 상황에서 쓰면 좋을까요? 제가 자주 활용하는 링크버튼 활용법을 소개해드릴게요.

• 유튜브 채널, 인스타그램, 블로그 등 외부 SNS 연결
• 이전 글 보기, 다음 글 이동
• 신청서, 구매링크, 자료 다운로드 링크
• 카테고리별 안내 버튼

이렇게 활용하면 독자 분들이 필요한 정보를 쉽게 찾을 수 있어요. 게다가 감성까지 챙긴 디자인이라 더 좋죠!

6. 스타일 변경이 어렵다면?

혹시 색상 코드 바꾸는 게 어렵게 느껴지신다면, 기본 예시 중에서 마음에 드는 걸 복사해서 링크 주소만 변경해보세요! 또, CSS 수정이 불편하시면 하나의 .jelly-button 클래스만 복붙해도 모든 버튼에 동일한 효과가 적용된답니다. 필요에 따라 font-size나 padding 값을 조절하시면 블로그 분위기에 맞춰 섬세하게 꾸밀 수 있어요 😊

Q CSS는 어디에 넣어야 하나요?

티스토리 글쓰기 창에서 ‘HTML’ 모드로 전환한 후, 제일 상단에 <style>~</style> 부분을 넣어주세요. 그 다음 아래쪽에 버튼 코드(<a>)를 추가하시면 돼요!

Q 버튼을 여러 개 써도 되나요?

네, 물론이에요! 같은 스타일을 반복해서 사용해도 되고, 다른 컬러로 다양하게 써보는 것도 추천드려요. 단, 너무 많으면 가독성이 떨어질 수 있으니 3~5개 정도가 적당해요.

Q 모바일에서도 잘 보이나요?

네! 이 말랑말랑 버튼은 반응형으로 작동해서 모바일 화면에서도 자연스럽게 줄 맞춤되고, 터치로도 잘 눌리도록 설계됐어요.

Q 배경색이나 글꼴은 변경할 수 있나요?

물론이죠! background-color를 원하는 색 코드로 바꾸거나, font-family 속성을 수정하면 나만의 스타일로 커스터마이징할 수 있어요.

오늘은 티스토리 블로그를 더욱 돋보이게 해주는 말랑말랑 링크버튼 만드는 방법을 소개해드렸어요. 핑크, 민트, 라벤더 등 감성 컬러와 귀여운 애니메이션으로 블로그 글의 분위기를 확 살릴 수 있었죠? 처음에는 조금 낯설게 느껴질 수 있지만, 한 번 적용해보면 정말 손쉽고, 방문자분들도 버튼을 통해 정보를 더 쉽게 찾아갈 수 있어요. 무엇보다 “오, 이 블로그 센스 있네~” 하는 반응을 이끌어내는 데 정말 탁월하답니다ㅎㅎ 여러분도 오늘 포스팅에서 소개한 버튼 중 마음에 드는 컬러를 하나 골라서, 지금 바로 블로그에 적용해보세요! 단 한 줄의 변화가 여러분 블로그에 큰 매력을 더해줄 거예요 ♥

 

티스토리 서식 설정 방법 완벽 가이드