티스토리 CSS 버튼 디자인! 3가지 입니다!

티스토리 CSS 버튼 디자인! 3가지 입니다!

티스토리 블로그에서 방문자의 클릭을 유도하는 가장 중요한 요소 중 하나가 바로 '버튼 디자인'입니다.

깔끔하고 눈길을 끄는 버튼을 사용하면 블로그의 체류 시간을 늘리고, 애드센스 클릭률도 자연스럽게 높일 수 있습니다.

이번 포스팅에서는 티스토리에 쉽게 적용할 수 있는 CSS 버튼 디자인 3가지를 공유드리고자 합니다.

 

CSS 버튼을 사용할 때 고려해야 할 점

• 반응형 디자인 : 모바일과 PC에서 자연스럽게 조절되는 크기
• 가독성 높은 텍스트 : 버튼 안의 글씨가 선명하고 읽기 쉬워야 함
• 클릭 유도 색상 : CTA(Call to Action) 버튼의 주목도가 높은 색상 사용
• 애니메이션 효과 : 자연스럽고 부드러운 효과가 적용되면 클릭률 증가

 

 

티스토리 CSS 버튼 디자인 3가지

아래 코드를 티스토리 HTML 편집기 > CSS 편집에 추가하여 사용하세요.

먼저 이번에 제공할 버튼의 디자인을 아래와 같습니다.

 

반응형

1번 버튼

.button-basic {
    display: block;
    width: 100%; /* 화면 크기에 맞게 조절 */
    max-width: 300px;
    padding: 15px;
    margin: 10px auto;
    text-align: center;
    background-color: #3498db;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}
.button-basic:hover {
    background-color: #2980b9;
}

 

 

2번 버튼

.button-shadow {
    display: block;
    width: 100%;
    max-width: 300px;
    padding: 15px;
    margin: 10px auto;
    text-align: center;
    background-color: #e74c3c;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.button-shadow:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

 

 

 

3번 버튼

.button-animate {
    display: block;
    width: 100%;
    max-width: 300px;
    padding: 15px;
    margin: 10px auto;
    text-align: center;
    background: linear-gradient(45deg, #f39c12, #e67e22);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.button-animate:hover {
    transform: scale(1.1);
}

 

사용 예시

<button class="button-basic">클릭하세요</button>
<button class="button-shadow">바로가기</button>
<button class="button-animate">지금 신청하기</button>

 

이렇게 사용하시면 되겠습니다.

728x90

 

버튼 디자인은 클릭을 유도하고 체류 시간을 늘릴 수 있어 SEO에도 영향이 있으니 디자인도 전략적으로 사용하시기 바랍니다.

 

도움이 되셨다면 구독, 좋아요 ^^