티스토리 링크 버튼 만들기

링크 버튼을 이용하여 페이지를 이동시킬 때 이미지로 할 수 있으나 전용 버튼으로 꾸며 줄 수도 있습니다.

 

해당 버튼은 제가 사용하고 있는 버튼이며 디자인은 1개입니다. 이 버튼을 적용시키는 방법은 모두 같으니 다른 디자인의 코드가 있으면 그걸 사용하시면 됩니다.

 

---

링크 버튼 1번 디자인

링크 버튼 CSS 코드 추가

• 블로그관리 - 꾸미기 - 스킨 편집 - html 편집 - CSS

이런 디자인의 링크 버튼입니다.

 

CSS 코드 맨 아래 다음 코드를 추가해 주면 됩니다.

/* btn-hover.color 공통 CSS 시작 */ 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
.buttons {
    margin: 10%;
    text-align: center;
}
 
.btn-hover {
    padding: 0px 0px 0px 0px; /* 버튼 내부 여백 */
    font-size: 24px; /* 폰트 크기 */
    font-weight: 800; /* 폰트 굵기 */
    color: rgb(0, 0, 0); /* 폰트 색상 */
    cursor: pointer;
    margin: 20px;
    width: 80%;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;
 
    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
 
.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
 
.btn-hover:focus {
    outline: none;
}
/* btn-hover.color 공통 CSS 끝 */

/* CSS 버튼7 */
.btn-hover.color-7 {
    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
/* CSS 버튼7 끝 */

링크 버튼 CSS 코드.txt

0.00MB

 

 

padding 좌우 여백, font-size 폰트 크기, font-weight 폰트 굵기, color 폰트 색상을 말합니다. 상황에 맞게 수정사히면 됩니다.

 

widht가 80%로 되어있습니다. 이는 버튼크기가 페이지의 80% 크기로 고정이 되는 것입니다. widht를 지우면 글씨수에 따라 버튼의 크기가 변경됩니다.

 

그리고 하단 'CSS 버튼7'이 버튼의 디자인입니다.

서식 만들기

• 블로그관리 - 콘텐츠 - 서식 관리

하단 코드로 티스토리 서식을 만들어서 글 작성 시 필요할 때마다 불러와서 사용하시면 됩니다.

<div><center><a href="#"><button class="btn-hover color-7">링크 버튼7</button></a></center></div>

링크 버튼 서식.txt

0.00MB

 

---

링크 버튼 2번 디자인

CSS 코드

/* 특정 링크에만 적용되는 버튼 스타일 */
.custom-button {
  position: relative; /* 애니메이션을 위한 상대 위치 */
  display: flex; /* 내부 텍스트 정렬 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */

  width: 400px; /* 버튼 가로 크기 */
  height: 60px; /* 버튼 세로 크기 */
  line-height: 70px; /* 버튼 내부 텍스트 위치 조정 */
  padding: 10px 20px; /* 버튼 내부 여백 */

  font-size: 20px; /* 글씨 크기 */
  font-weight: bold; /* 글씨 굵기 */
  font-family: 'Arial', sans-serif; /* 원하는 글씨체 사용 가능 */
  color: white !important; /* 기본 하이퍼링크 색상 제거하고 흰색 적용 */
  text-decoration: none !important; /* 밑줄 제거 */

  background: rgb(255, 27, 0);
  background: linear-gradient(0deg, rgba(255, 27, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
  transition: 0.3s ease-in-out;
}

/* 마우스 오버 효과 */
.custom-button:hover {
  color: #f0094a !important;
  background: transparent;
  box-shadow: none;
}

/* 버튼 테두리 애니메이션 */
.custom-button:before,
.custom-button:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: #f0094a;
  box-shadow:
    -1px -1px 5px 0px #fff,
    7px 7px 20px 0px #0003,
    4px 4px 5px 0px #0002;
  transition: 400ms ease all;
}

.custom-button:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

.custom-button:hover:before,
.custom-button:hover:after {
  width: 100%;
  transition: 800ms ease all;
}

/* 버튼을 중앙에 정렬하고 싶을 때 사용하는 스타일 */
.button-container {
  display: flex;
  justify-content: center;
}

링크 버튼 2번 디자인 CSS.txt

0.00MB

서식 만들기

<div class="button-container"><a class="custom-button" href="https://mfinform.com/" rel="noopener">링크 버튼 2번 디자인</a></div>

링크 버튼 2번 디자인 서식.txt

0.00MB

주소는 변경해주셔야 합니다.