본문 바로가기
카테고리 없음

티스토리 블로그에서 깜빡이는 텍스트 버튼 추가하기 (버튼 크기, 글꼴 크기, 색상 변경 방법 완벽 정리)

by 티스토리칸 2025. 6. 26.
반응형

 

 

설명글입니다 티스토리블러그에서 깜빡이는 텍스트 버튼 추가 글을 먼저 보고 오세요

여기를 클릭하세요!

 

 

HTML 코드 (버튼 추가)

<a href="https://원하는링크.com" class="blink-button">여기를 클릭하세요!</a>

 

CSS 코드 (깜빡이는 효과, 크기, 글꼴, 색상 조정)

<style>
.blink-button {
    display: inline-block;
    padding: 12px 24px; /* 버튼 크기 (상하, 좌우 여백) */
    background-color: #ff6600; /* 버튼 배경색 */
    color: #ffffff; /* 텍스트 색상 */
    text-decoration: none;
    font-size: 16px; /* 글꼴 크기 */
    font-weight: bold;
    border-radius: 8px; /* 버튼 둥근 정도 */
    animation: blink 1s infinite;
    transition: background-color 0.3s, color 0.3s;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* 마우스 호버 시 색상 변화 */
.blink-button:hover {
    background-color: #ff3300;
    color: #fff;
}
</style>

 

 

 

주요 조정 방법 정리

  • padding: 버튼 크기 조정 (12px 24px → 상하 12px, 좌우 24px)
  • background-color: 버튼 배경색 변경 (#ff6600 부분을 원하는 색상 코드로 변경)
  • color: 버튼 글자 색상
  • font-size: 글꼴 크기 (예: 16px → 크기 조정 가능)
  • border-radius: 버튼 모서리 둥글기 (0으로 설정하면 각진 버튼)
  • animation: blink 1s infinite; → 깜빡이는 속도 조정 (1초 간격, 더 빠르게 하려면 0.5s 등으로 변경)

④ 적용 방법

  • 위 HTML과 CSS 코드를 티스토리 글 작성 시 HTML 모드로 입력하거나, 스킨 편집의 CSS 영역에 삽입하세요.
  • 여러 버튼에 동일한 효과를 적용하려면 클래스명을 동일하게 지정하면 됩니다.

 

CSS 코드 색 코드

/* 무지개 색상 배경 애니메이션 */
@keyframes rainbow {
    0%   { background-color: #ff0000; } /* 빨강 */
    16%  { background-color: #ff7f00; } /* 주황 */
    32%  { background-color: #ffff00; } /* 노랑 */
    48%  { background-color: #00ff00; } /* 초록 */
    64%  { background-color: #0000ff; } /* 파랑 */
    80%  { background-color: #4b0082; } /* 남색 */
    100% { background-color: #8b00ff; } /* 보라 */
}

/* 깜빡이는 효과 */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* 마우스 올릴 때 효과 */
.rainbow-button:hover {
    opacity: 0.8;
    text-decoration: underline;
}
</style>

 

 

[설명 및 커스터마이징]

무지개 색상 자동 변환:
@keyframes rainbow 부분이 버튼의 배경색을 빨강 → 주황 → 노랑 → 초록 → 파랑 → 남색 → 보라 순으로 자연스럽게 변경합니다.

깜빡이는 효과:
@keyframes blink 로 1초 간격으로 버튼이 깜빡입니다.

크기 조정 방법:
padding 값 조정 (예: padding: 16px 32px; → 더 큰 버튼)

글꼴 크기 변경:
font-size 값 조정 (예: font-size: 18px;)

둥근 정도 변경:
border-radius 값 조정 (예: border-radius: 0; 하면 각진 버튼)

속도 변경:

  • 무지개 색 전환 속도: animation: rainbow 5s infinite linear;
    → 5s를 원하는 속도로 변경 (숫자가 작을수록 빠름)
  • 깜빡이는 속도: animation: blink 1s infinite;
    → 1s를 변경해 깜빡이는 속도 조절

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형