<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Changing Button</title>
<style>
/* 기본 버튼 스타일 */
.color-changing-button {
padding: 15px 30px;
font-size: 18px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
outline: none;
background-color: #4CAF50;
animation: colorChange 5s infinite; /* 애니메이션 설정 */
transition: background-color 0.5s ease;
}
/* 색상이 변하는 애니메이션 */
@keyframes colorChange {
0% { background-color: #4CAF50; } /* 초록색 */
25% { background-color: #2196F3; } /* 파란색 */
50% { background-color: #FF5722; } /* 주황색 */
75% { background-color: #FFEB3B; } /* 노란색 */
100% { background-color: #4CAF50; } /* 초록색으로 돌아옴 */
}
</style>
</head>
<body>
<button class="color-changing-button">Click Me!</button>
</body>
</html>
