티스토리 버튼 서식 "다양한 버튼" 코드 받아가세요.

티스토리 블로그에서 버튼 디자인 활용하는 방법

티스토리 블로그에서 사용할 수 있는 다양한 버튼 디자인을 소개해 드리려고 합니다.

네이버 블로그는 HTML 코드를 작성하기 어렵지만, 티스토리에서는 HTML을 자유롭게 사용할 수 있기 때문에 보다

다양한 스타일을 적용할 수 있다는 장점이 있습니다.

이번 게시글에서는 여러분이 쉽게 따라할 수 있는 버튼 디자인 예시를 공유하고

어떤 상황에서 어떤 스타일의 버튼이 적합한지 간단한 설명도 덧붙일 예정입니다.

---

📌 티스토리에서 사용할 수 있는 버튼 디자인

1. 기본 초록색 버튼

 

이 버튼은 깔끔하고 심플한 초록색 디자인으로, 어디서든 사용하기 좋은 기본형 버튼입니다.

상단 버튼 코드.txt

0.00MB

2. 그라디언트 버튼

 

화려한 그라디언트 효과를 주어 버튼을 더욱 눈에 띄게 만들어 줍니다.

중요한 내용이나 강조하고 싶은 부분에 적합합니다. 🌈

상단 버튼 코드.txt

0.00MB

3. 파란색 그림자 버튼

 

버튼에 살짝 그림자가 들어가 있어 버튼이 더 입체적이고 돋보이도록 디자인되었습니다.

부드러운 파란색으로 누구나 쉽게 접근할 수 있는 디자인이에요.

상단 버튼 코드.txt

0.00MB

4. 투명 배경 버튼

 

투명한 배경과 테두리가 강조된 버튼으로 깔끔하고 세련된 느낌을 줍니다. 💎

상단 버튼 코드.txt

0.00MB

5. 살짝 떠 있는 빨간 버튼

 

이 버튼은 살짝 떠 있는 느낌과 그림자 효과를 주어 마우스를 올렸을 때 눌리는 것처럼 보이는 효과를 줍니다.

강조하고 싶은 중요한 버튼에 딱이죠!

상단 버튼 코드.txt

0.00MB

6. 보라색 텍스트 그림자 버튼

 

보라색 배경에 텍스트 그림자가 들어가 있어 독특하고 신비로운 분위기를 연출합니다.

중요한 콘텐츠를 꾸미는 데 사용하면 좋겠죠? ✨

상단 버튼 코드.txt

0.00MB

7. 둥근 주황색 버튼

 

둥글게 처리된 버튼으로 귀엽고 친근한 느낌을 주며 사용자들에게 좀 더 다가가는 느낌을 줄 수 있습니다.

상단 버튼 코드.txt

0.00MB

8. 경쾌한 녹색 버튼

 

상쾌하고 경쾌한 느낌의 녹색 버튼입니다. 신선한 디자인을 원하신다면 이 버튼이 적합 합니다.

상단 버튼 코드.txt

0.00MB

---

오늘 소개해드린 다양한 버튼 디자인을 참고해 여러분의 티스토리 블로그에 맞는 스타일을 적용해보세요! 😊

HTML 코드를 잘 활용하면 글의 가독성과 디자인을 크게 향상시킬 수 있으니

필요에 맞게 자유롭게 커스터마이징해보세요.

다음에도 더 유용한 디자인 팁으로 찾아오겠습니다! 🤗

 

적용하는 방법을 모른다면?

적용하는 방법을 모른다면 아래 과정을 참고하여 따라하시면 됩니다.

원하는 버튼의 코드를 복사하여 본인 티스토리로 넘어가서 게시글 작성하기를 눌러줍니다.

 

본인 티스토리로 들어가 게시글 작성을 누른다.

 

게시글 작성하기를 눌러서 기본모드를 -> html 로 변경해줍니다.

티스토리 html 코드 작성창

이렇게 창이 검은색으로 나오게 되며 제목을 입력하고 아래 내용에 html 코드를 붙여넣기를 해준다음에

다시 html 로 변경한 에디터 모드를 기본모드로 변경하면 됩니다.

html 모드에서 기본모드로 변경합니다.

기본모드로 변경하면 적용되는것을 볼수있습니다.

 

기본모드로 변경하면 이렇게 적용된 모습을 볼수있습니다.