설명글입니다 티스토리블러그에서 깜빡이는 텍스트 버튼 추가 글을 먼저 보고 오세요
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를 변경해 깜빡이는 속도 조절