css 버튼 html 코드로 블로그에 추가하는 방법 (+티스토리, 워드프레스, 버튼 10가지 공유)

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

무료배송

25년신상 프리미엄 일체형 접이식 원터치트리 캐슬트리 트리풀세트 보관백포함, 샴페인 글로우 풀세트

무료배송

버라이어티 쿠키 코스트코 1056g (44g x 24입)

무료배송

울엄마가 좋아하는 옛날 옥수수빵, 140g, 10개

로켓배송

한일의료기 세인트리빙 블리스 프리미엄 매트 카본 탄소매트 전자파없는 워셔블 국내생산, 킹(1500x2000), 블리스 토퍼 딥그레이

무료배송

다이와 주피터 ID 쭈꾸미 갑오징어 전용 낚시대 감도최상 강한 허리 로드

한국다이와정품 태클 박스 TB7000 블랙/레드

로켓배송

투위 자수 양면기모 가족잠옷SET 커플잠옷

무료배송

2025 노스페이스 화이트라벨 공용 블랙 노벨티 눕시 RDS 다운 자켓 NJ1DM62G 방수 방풍 겨울 패딩

블로그에 예쁜 버튼 하나 추가하려고 했는데 생각보다 복잡하더라구요. CSS 버튼 HTML 코드만 있으면 티스토리든 워드프레스든 5분 안에 추가할 수 있어요. 제가 직접 써본 버튼 디자인 10가지를 코드와 함께 공유할게요. 복사해서 붙여넣기만 하면 바로 사용할 수 있거든요.

CSS 버튼 HTML 코드 기본 구조

HTML 버튼의 핵심 요소

버튼 코드는 크게 HTML 구조와 CSS 스타일로 나뉘어요. HTML은 버튼의 뼈대를 만들고, CSS는 색상과 모양을 꾸며주는 역할이거든요. 제가 처음 시도했을 때는 이 둘을 분리해서 작성해야 한다는 걸 몰라서 한참 헤맸어요.

인라인 스타일과 외부 CSS 차이

블로그에 버튼 추가할 때는 인라인 스타일 방식이 훨씬 편해요. style 속성을 HTML 태그 안에 직접 넣는 방식이거든요. 외부 CSS 파일을 만들면 관리는 쉬운데, 블로그 플랫폼마다 적용 방법이 달라서 오히려 복잡하더라구요. 실제로 제 블로그에서는 전부 인라인 방식으로 사용하고 있어요.

반응형 버튼 만드는 핵심 속성

요즘은 모바일에서 블로그 보는 분들이 더 많잖아요. 그래서 버튼도 화면 크기에 맞춰서 자동으로 조절되게 만들어야 돼요. display: inline-block 속성을 주면 버튼이 텍스트처럼 배치되면서도 크기 조절이 자유롭거든요. 그리고 max-width를 100%로 설정하면 작은 화면에서도 삐져나가지 않아요.

티스토리 버튼 추가 방법

글쓰기 에디터에서 HTML 모드 전환

티스토리는 기본 에디터와 HTML 에디터 두 가지를 제공해요. 버튼 코드를 넣으려면 반드시 HTML 모드로 전환해야 되거든요. 에디터 왼쪽 상단을 보면 'HTML' 버튼이 있는데, 클릭하면 코드 입력 화면으로 바뀌어요. 제가 처음에 이걸 몰라서 기본 모드에서 코드를 붙여넣었다가 그대로 텍스트로 표시돼서 당황했던 기억이 나네요.

코드 삽입 위치 선택하기

버튼을 어디에 배치하느냐에 따라 독자의 클릭률이 확 달라져요. 글 중간에 넣으면 자연스럽게 시선이 가고, 글 끝에 넣으면 행동 유도 효과가 좋거든요. 제 경험상 본문 내용 바로 다음, 관련 정보를 소개하는 문단 끝에 배치했을 때 클릭이 제일 많이 나왔어요.

모바일 미리보기로 확인 필수

PC에서는 멀쩡해 보이던 버튼이 모바일에서 보면 깨지는 경우가 많아요. 티스토리 관리자 페이지에서 '모바일 미리보기' 기능을 꼭 활용하세요. 실제로 제가 만든 버튼 중에서도 PC에서는 한 줄로 예쁘게 나왔는데, 스마트폰에서 보니까 텍스트가 두 줄로 나뉘어져서 다시 수정한 적이 있거든요.

워드프레스 버튼 적용 방법

구텐베르크 에디터 HTML 블록 사용

워드프레스는 구텐베르크라는 블록 에디터를 쓰는데요. 버튼 추가하려면 'HTML 사용자 정의' 블록을 찾아야 돼요. 왼쪽 상단 '+' 버튼 눌러서 '사용자 정의 HTML' 검색하면 바로 나와요. 여기에 버튼 코드를 붙여넣으면 끝이거든요. 티스토리보다 오히려 더 간단하더라구요.

클래식 에디터에서 적용하는 법

아직 클래식 에디터 쓰시는 분들도 많으시잖아요. 이 경우에는 '텍스트' 탭으로 전환해서 HTML 코드를 넣으면 돼요. 비주얼 편집기에서는 코드가 그대로 보이니까 반드시 텍스트 모드에서 작업하셔야 돼요. 제 지인이 이걸 몰라서 계속 비주얼 모드에서 코드 붙여넣다가 안 된다고 하소연하시더라구요.

테마별 CSS 충돌 해결법

워드프레스는 테마마다 기본 CSS 스타일이 달라서 버튼 디자인이 의도와 다르게 나올 수 있어요. 이럴 때는 CSS 속성 뒤에 !important를 붙이면 테마 스타일보다 우선 적용되거든요. 실제로 제가 써본 테마 중에 링크 색상을 강제로 파란색으로 바꾸는 게 있었는데, !important 추가하니까 바로 해결됐어요.

버튼 텍스트 및 URL 설정

클릭 유도하는 텍스트 작성법

버튼 문구에 따라 클릭률이 2배 이상 차이 나요. '자세히 보기'보다는 '지금 바로 확인하기'처럼 구체적이고 긴박감 있는 표현이 훨씬 효과적이거든요. 제 블로그에서 A/B 테스트 해봤는데, '더 알아보기'는 클릭률 3%였지만 '무료로 시작하기'는 7%까지 올라갔어요.

URL 설정과 새 창 열기 옵션

버튼 클릭했을 때 같은 창에서 열릴지, 새 창으로 열릴지 선택할 수 있어요. href 속성에 URL 넣고, target="_blank"를 추가하면 새 창으로 열리거든요. 외부 링크는 새 창으로, 내부 글 이동은 같은 창으로 설정하는 게 일반적이에요. 제 경험상 상품 링크나 가입 페이지는 무조건 새 창이 좋더라구요.

단축 URL과 추적 링크 활용

긴 URL은 코드가 복잡해 보이고 관리도 어려워요. bit.ly나 네이버 단축URL 같은 서비스로 줄이면 깔끔하거든요. 그리고 구글 애널리틱스 UTM 파라미터를 붙이면 어떤 버튼에서 얼마나 클릭이 들어왔는지 추적할 수 있어요. 실제로 제가 쿠팡 파트너스 링크에 UTM 붙여서 사용하는데, 어떤 글에서 수익이 많이 나는지 한눈에 파악되더라구요.

CSS 버튼 디자인 10가지

기본형 단색 버튼 (디자인 1-3)

가독성 좋고 어떤 블로그 디자인에도 잘 어울리는 기본 버튼들이에요. 제가 제일 많이 쓰는 스타일이기도 하고요.

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 12px 30px; background-color: #007bff; color: #ffffff !important; text-decoration: none !important; border-radius: 5px; font-weight: bold; text-align: center; transition: background-color 0.3s;">지금 바로 확인하기</a>

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 14px 35px; background-color: #28a745; color: #ffffff !important; text-decoration: none !important; border-radius: 8px; font-weight: bold; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s;">무료로 시작하기 →</a>

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 15px 40px; background-color: #dc3545; color: #ffffff !important; text-decoration: none !important; border-radius: 10px; font-weight: bold; font-size: 16px; text-align: center; transition: transform 0.2s; box-shadow: 0 5px 10px rgba(0,0,0,0.15);">⚡ 오늘만 특가</a>

그라데이션 효과 버튼 (디자인 4-5)

요즘 트렌디한 그라데이션 효과를 넣으면 버튼이 훨씬 세련되 보여요. SNS 광고에서 많이 보는 스타일이죠.

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 13px 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff !important; text-decoration: none !important; border-radius: 25px; font-weight: bold; text-align: center; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); transition: all 0.3s;">💎 프리미엄 혜택 받기</a>

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 14px 36px; background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%); color: #ffffff !important; text-decoration: none !important; border-radius: 30px; font-weight: bold; text-align: center; box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3); transition: transform 0.2s;">🔥 지금 예약하기</a>

테두리 스타일 버튼 (디자인 6-7)

배경 없이 테두리만 있는 버튼은 미니멀하면서도 깔끔해요. 본문에 여러 버튼을 배치할 때 부담스럽지 않더라구요.

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 11px 28px; background-color: transparent; color: #007bff !important; text-decoration: none !important; border: 2px solid #007bff; border-radius: 5px; font-weight: bold; text-align: center; transition: all 0.3s;">자세히 알아보기</a>

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 12px 30px; background-color: #ffffff; color: #000000 !important; text-decoration: none !important; border: 2px solid #000000; border-radius: 3px; font-weight: 600; text-align: center; transition: all 0.3s;">포트폴리오 보기</a>

특수 효과 버튼 (디자인 8-10)

애니메이션이나 특별한 효과를 넣으면 버튼이 살아있는 것처럼 느껴져요. 클릭률도 확실히 올라가고요.

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 13px 34px; background-color: #000000; color: #00ff00 !important; text-decoration: none !important; border: 2px solid #00ff00; border-radius: 8px; font-weight: bold; text-align: center; box-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00; transition: all 0.3s;">⚡ 다운로드 시작</a>

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 15px 38px; background-color: #ff6b6b; color: #ffffff !important; text-decoration: none !important; border-radius: 12px; font-weight: bold; font-size: 17px; text-align: center; box-shadow: 0 8px 0 #c0392b, 0 12px 20px rgba(0,0,0,0.3); transition: all 0.1s; position: relative; top: 0;">🎯 지금 참여하기</a>

【코드】

<a href="버튼 클릭시 이동 URL" target="_blank" style="display: inline-block; padding: 14px 32px; background-color: #1da1f2; color: #ffffff !important; text-decoration: none !important; border-radius: 50px; font-weight: bold; text-align: center; box-shadow: 0 3px 8px rgba(29, 161, 242, 0.3); transition: all 0.3s;">🐦 팔로우하기</a>

HTML 버튼 코드 주의사항

hover 효과가 작동하지 않을 때

인라인 스타일로 작성한 버튼은 hover 효과(마우스 올렸을 때 변화)를 직접 적용할 수 없어요. 이건 CSS의 한계거든요. hover 효과를 넣고 싶으면 <style> 태그를 추가로 작성해야 돼요. 제가 처음에 이걸 몰라서 transition 속성만 넣고 왜 안 바뀌나 한참 고민했던 기억이 나네요.

모바일에서 버튼 크기 조절

PC에서 보기 좋은 크기가 모바일에서는 너무 작거나 클 수 있어요. 미디어 쿼리를 사용하면 화면 크기별로 다른 스타일을 적용할 수 있거든요. 실제로 제 블로그 버튼도 PC에서는 padding을 15px로, 모바일에서는 12px로 다르게 설정했더니 훨씬 자연스럽더라구요.

접근성 고려사항

시각 장애인이나 키보드만 사용하는 분들도 버튼을 쉽게 사용할 수 있어야 돼요. title 속성으로 버튼 설명을 추가하고, 색상 대비를 충분히 확보해야 되거든요. WCAG 가이드라인에 따르면 텍스트와 배경의 명암 대비가 최소 4.5:1 이상이어야 한대요. 파란색 배경에 하얀 글씨면 문제없지만, 노란색 배경에 하얀 글씨는 대비가 부족해요.

SEO에 미치는 영향

버튼 링크도 검색엔진이 크롤링하기 때문에 anchor 텍스트(버튼 문구)가 중요해요. '여기 클릭'보다는 '무료 상담 신청하기'처럼 구체적인 문구를 쓰는 게 SEO에 유리하거든요. 그리고 nofollow 속성을 남용하면 링크 점수가 전달되지 않으니 주의하세요. 제 경험상 내부 링크 버튼은 nofollow 없이, 외부 광고 링크만 nofollow를 붙이는 게 좋더라구요.