왕초보 티스토리 반응형 버튼 만들기 정리

티스토리 글 막 시작하신 분들은 고수들의 화려한 버튼들을 어떻게 만들어 사용하는지 궁금하지 않으셨나요?

그래서 클릭확률을 높일 수 있는 반응형 버튼 만들기와 한 번만 설정해 두면 언제든지 불러와 쓸 수 있는 방법을 알려드리겠습니다. 왕초보 수준에서 작성해 보았으니 잘 따라와 주세요.

 

아래와 같은 버튼을 만들어 볼 거예요.

1. 먼저 블로그 관리 홈에 가셔서 서식관리 클릭  → 서식 쓰기 클릭합니다.

2. 다음 기본모드에서 HTML를 클릭해 줍니다.

3. 그렇게 나온 까만 화면에 아래 코드를 전체 복사해서 붙여 넣기를 해줍니다. 

메모장에 복사를 해서 저장을 해놓으셔도 됩니다.

붉은색 버튼 .txt

0.00MB

 

<div> <style> .myBigButton {     background: linear-gradient(to bottom, #FF3B2F, #E62A1E); /* 강렬한 빨간색 */     border-radius: 50px; /* 둥근 버튼 */     border: none;     display: inline-block;     cursor: pointer;     color: #ffffff !important; /* 글씨 흰색 */     font-family: Arial, sans-serif;     font-size: 24px; /* 기존 27px → 24px (3포인트 감소) */     font-weight: bold;     padding: 25px 51px; /* 가로 4/5로 축소, 세로 1/3 증가 */     text-decoration: none;     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);     box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);     transition: all 0.3s ease-in-out;     display: flex;     align-items: center;     justify-content: center;     gap: 12px; /* 아이콘과 텍스트 간격 */ } .myBigButton:hover {     background: linear-gradient(to bottom, #FF5C4D, #E62A1E);     box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.3);     transform: scale(1.05); /* 약간 커지는 효과 */ } .myBigButton:active {     transform: scale(0.98); /* 클릭 시 약간 눌리는 효과 */ } </style> </div> <div style="text-align: center;"><a class="myBigButton" href="https://www.example.com"> <b>문구를 입력하세요</b> 👆 </a></div>

4. 아래는 메모장의 코드를 복사해서 붙여넣기 한 후입니다.

5. 제목 부분에 버튼의 이름을 입력하고 완료하지 않고 다시 기본모드로 클릭하면 화면에 버튼이 뜹니다.

6. 버튼 문구는 바로 수정할 수 있습니다. 

 

7. 자 이제 버튼을 누르면 어디론가 가야 하겠죠? 링크를 달아주겠습니다.

다시 HTML화면으로 들어가서 제일 아래에 표시해 둔 부분에

링크하고자 하는 사이트의 주소를 복사 붙여 넣기 하면 끝입니다.

8. 다음에 사용하실 때는 서식에서 저장해 둔 버튼을 가져오면 됩니다.

링크는 HTML화면에서 수정해 주시고요.

 

자 너무 간단해서 시시하죠? 적용하고 나서 꼭 모바일에서도 잘 보이는지 미리 보기로 확인해 주세요. 

자주 쓰는 버튼이 있다면 꼭 서식 기능으로 등록해 보세요!
매번 입력하던 번거로움이 사라지고, 작업 속도가 훨씬 빨라질 거예요.

 

단통법 폐지 휴대폰 싸게 사는 꿀팁 총정리

국민취업지원제도 총정리

2025년 한부모가정 지원정책 및 자격조건 정리

변희재 프로필 15살 연하약혼자 사진, 과거발언, 매불쇼 출연 논란