티스토리 반짝이는 html 링크버튼 만들기

 

💡 블로그에 생기를 불어넣고 싶으신가요? 단순한 텍스트 링크를 넘어, 독자의 시선을 사로잡는 반짝이는 링크를 만들어 보세요! 티스토리에서 HTML 코드를 활용해 시선을 끄는 버튼을 만드는 법을 알려드립니다.

“이 링크를 클릭하면 무슨 일이 일어날까?”라는 궁금증을 유발하는 클릭 유도 링크 버튼. 초보자도 쉽게 따라 할 수 있도록 CSS + HTML 예제를 함께 제공드립니다 😊

📢 지금 바로 블로그에 적용해보고 클릭률을 높여보세요!
사용자가 떠나기 전 주목을 끌 수 있는 강력한 도구입니다.

📌 CSS 코드 추가 방법

먼저 링크 박스를 적용 하려면 티스토리 CSS 코드를 적용 해야 합니다.

 

관리페이지 > 스킨편집 > html 편집 > CSS 메뉴로 들어간 뒤, 아래 코드를 제일 아래에 붙여넣고 저장해 주세요.

<style>
.button-container {
    max-width: 100%;
    margin: 20px auto;
}
@keyframes button-shine {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}
.button-shine {
    animation: button-shine 1s infinite;
    transition: all 0.3s ease;
}
.button-shine:hover {
    opacity: 0.9;
}
</style>

✅ 기본 반짝이 링크버튼 예시

기본 반짝이 버튼

<div class="button-container">
  <a href="https://example.com" class="button-shine" 
     style="background-color: #FF6B6B; color: #fff; display: flex; align-items: center; justify-content: center; height: 45px; text-decoration: none;">
    기본 반짝이 버튼
  </a>
</div>

🎨 색상별 반짝이 링크버튼 예시

🔵 파란색

파란색 반짝이 버튼

<div class="button-container">
  <a href="https://example.com" class="button-shine" 
     style="background:#4B89FF; color:#fff; display:flex; align-items:center; justify-content:center; height:45px; text-decoration:none;">
    파란색 반짝이 버튼
  </a>
</div>

🟢 녹색

녹색 반짝이 버튼

<div class="button-container">
  <a href="https://example.com" class="button-shine" 
     style="background:#4CAF50; color:#fff; display:flex; align-items:center; justify-content:center; height:45px; text-decoration:none;">
    녹색 반짝이 버튼
  </a>
</div>

🟡 노란색

노란색 반짝이 버튼

<div class="button-container">
  <a href="https://example.com" class="button-shine" 
     style="background:#FFD700; color:#fff; display:flex; align-items:center; justify-content:center; height:45px; text-decoration:none;">
    노란색 반짝이 버튼
  </a>
</div>

🟠 주황색

주황색 반짝이 버튼

<div class="button-container">
  <a href="https://example.com" class="button-shine" 
     style="background:#FF9933; color:#fff; display:flex; align-items:center; justify-content:center; height:45px; text-decoration:none;">
    주황색 반짝이 버튼
  </a>
</div>

🟣 모브핑크

모브핑크 반짝이 버튼

<div class="button-container">
  <a href="https://example.com" class="button-shine" 
     style="background:#897475; color:#fff; display:flex; align-items:center; justify-content:center; height:45px; text-decoration:none;">
    모브핑크 반짝이 버튼
  </a>
</div>

✨ 지금 바로 붙여넣고 블로그 분위기를 바꿔보세요!
클릭률과 체류시간 모두 높일 수 있습니다.

🎈 사용 시 주의사항

• HTML 모드에서 삽입해야 서식이 정확히 적용됩니다.
• href에 원하는 링크 주소를 넣어주세요.
• 텍스트는 자유롭게 수정 가능합니다.

 

여러분은 어떤 색상의 반짝이 버튼이 가장 마음에 드셨나요?
댓글로 남겨주시면, 더 다양한 버튼 서식도 제작해드릴게요 😊