본문 바로가기

티스토리 자동 링크 버튼

티스토리 자동 링크 버튼 데모

📋 사용 방법

1. CSS 코드 삽입: 아래 CSS 코드를 티스토리 관리 → 꾸미기 → 스킨 편집 → CSS 탭에 추가

2. 자동 적용: https://로 시작하는 모든 링크가 자동으로 버튼 스타일로 변경됩니다

3. 예외 처리: 버튼 스타일을 원하지 않는 링크에는 class="no-button" 추가

🎯 기본 링크 버튼

일반적인 웹사이트 링크들이 자동으로 버튼으로 변환됩니다:

구글 검색하기 네이버 바로가기 예제 사이트 방문

🌈 특별한 사이트별 스타일

주요 사이트들은 각각의 브랜드 컬러로 표시됩니다:

YouTube 동영상 보기 GitHub 저장소 보기

네이버 블로그 방문 티스토리 블로그 보기

인스타그램 프로필 페이스북 페이지

🚫 예외 처리

버튼 스타일을 원하지 않는 링크에는 class="no-button"을 추가하세요:

<a href="https://example.com" class="no-button">일반 링크 스타일</a>

결과: 일반 링크 스타일 (버튼이 아닌 일반 링크)

📱 반응형 디자인

모바일 환경에서도 완벽하게 동작합니다. 화면 크기를 줄여보세요:

모바일 테스트 링크 반응형 테스트

💡 추가 기능

🔧 커스터마이징

새로운 사이트의 버튼 스타일을 추가하려면 CSS에 다음과 같은 코드를 추가하세요:

/* 새로운 사이트 스타일 */ a[href*="새사이트도메인.com"]:not(.no-button):not(.link-preview) { background: linear-gradient(135deg, #색상1, #색상2); box-shadow: 0 4px 15px rgba(색상, 0.3); } a[href*="새사이트도메인.com"]:not(.no-button):not(.link-preview)::before { content: "🎯 "; }