2025 초보도 따라하는 티스토리 반응형 링크 버튼 삽입 꿀팁

안녕하세요. Azunta입니다.

이번에는 티스토리 반응형 링크 버튼 만드는 방법을 알려드리겠습니다.

티스토리 블로그 최적화 설정에 대한 글은 아래 링크를 참고해 주세요.

 

티스토리

 

 

1. 티스토리 반응형 링크 버튼 코드

'꾸미기' - '스킨 편집' - 'HTML 편집' - 'CSS' 맨 아래에 다음 코드를 입력합니다.

 

---

코드

 

.arenabt {
    padding: 0px 50px 0px 50px;
    height: 75px;
    border-radius: 25px;
    font-size: 20px;
    font-weight: 800;
  color: #fff; 
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
 
}


.star1 {
  border: none;
  background: #ff751a;
  color: #fff;
  overflow: hidden;
}

.star1:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: stars 3s ease-in-out infinite;
}
.star1:hover{
  opacity: 1;
  font-size: 1.4em;
      transform: scale(1.05);
  text-decoration: underline;
}
.star1:active{
     position: relative;
    top: 5px;
    left: 5px;
    opacity: 0.8;
    box-shadow: 3px 3px 0 0 rgba(48, 48, 48, 0.2);
}


@-webkit-keyframes stars {
    0% {-webkit-transform: scale(0) rotate(45deg);opacity: 0;}
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

 

---

간단히 설명하면

버튼

버튼

버튼

입니다.

 

2. 서식 만들기

이제 '콘텐츠' - '서식 관리' - '서식 쓰기' 를 들어갑니다.

제목은 직관적으로 '버튼'으로 하고 HTML을 눌러줍니다.

내용에 아래 코드를 넣어줍니다.

 

---

코드

 

<center><a href="주소" target="_blank" rel="noopener"> <button class="arenabt star1"> 텍스트 입력 </button> </a></center>

 

---

저장을 하면 끝납니다.

 

3. 서식 사용

서식 버튼은 글 중간에 링크 버튼이 필요하면 넣습니다.

그리고 '텍스트 입력' 을 지우지 말고 버튼 내용을 먼저 적고 나중에 지웁니다.

위에서 '링크' 버튼을 누르고 링크 주소를 넣습니다.

링크