2버튼 깜빡이
<div class="button-container">
<a href="https://example.com/link1" class="button-link">
<button class="custom-button">버튼 1 (링크 1)</button>
</a>
<a href="https://example.com/link2" class="button-link">
<button class="custom-button">버튼 2 (링크 2)</button>
</a>
</div>
<style>
/* 버튼 컨테이너를 위아래로 배치 */
.button-container {
display: flex;
flex-direction: column; /* 위아래로 쌓이게 */
justify-content: center;
align-items: center;
min-height: 100vh; /* 화면 높이 전체 사용 */
margin: 0;
padding: 10px; /* 버튼 간 간격을 위한 패딩 */
gap: 20px; /* 버튼 사이 간격 */
}
/* 링크 스타일 제거 */
.button-link {
text-decoration: none; /* 기본 링크 밑줄 제거 */
width: 100%; /* 버튼이 컨테이너 너비에 맞게 */
}
/* 버튼 스타일 */
.custom-button {
background-color: #ff0000; /* 빨간색 배경 */
color: #ffffff; /* 흰색 글자 */
font-size: 20px; /* 글자 크기 (가독성 좋게) */
font-weight: bold; /* 두꺼운 글자 */
padding: 20px 0; /* 위아래 패딩 */
width: 100%; /* 화면 너비에 꽉 차게 */
border: none; /* 테두리 제거 */
border-radius: 10px; /* 둥근 모서리 */
cursor: pointer; /* 클릭 가능 커서 */
text-align: center; /* 텍스트 중앙 정렬 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 약간의 그림자 */
animation: blink 1s infinite; /* 깜빡이는 애니메이션 */
}
/* 깜빡이는 효과 정의 */
@keyframes blink {
0% { opacity: 1; } /* 완전히 보임 */
50% { opacity: 0.5; } /* 반투명 */
100% { opacity: 1; } /* 다시 완전히 보임 */
}
/* 호버 효과 (PC에서만 적용, 애니메이션 일시 중지) */
.custom-button:hover {
background-color: #e60000; /* 살짝 어두운 빨간색 */
animation-play-state: paused; /* 호버 시 깜빡임 멈춤 */
}
/* 반응형 조정 */
@media (max-width: 600px) {
.custom-button {
font-size: 18px; /* 작은 화면에서 글자 크기 조정 */
padding: 15px 0; /* 패딩 조정 */
}
}
@media (min-width: 601px) {
.custom-button {
font-size: 24px; /* 큰 화면에서 글자 크기 증가 */
padding: 25px 0; /* 패딩 증가 */
}
}
</style>
댓글
댓글 쓰기