버튼 클릭 애니메이션

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 27개 중 20번째.

때때로 우리는 버튼을 클릭했을 때 축소되거나, 빛나거나, 튀어 오르는 것과 같은 즉각적인 피드백을 주기를 원합니다. 우리는 JavaScript를 사용하여 CSS 애니메이션 또는 트랜지션을 트리거할 수 있습니다.

먼저, HTML에 간단한 버튼을 만듭니다:

<button id="animatedButton">Click Me</button>

그런 다음, 버튼의 스타일을 지정하기 위해 몇 가지 기본적인 CSS를 추가합니다:

#animatedButton {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

이제 클릭 애니메이션을 만들기 위해 JavaScript를 추가합니다:

const button = document.getElementById('animatedButton');

button.addEventListener('click', function() {
  // 클릭 효과를 위한 클래스 추가
  button.classList.add('button-clicked');
  
  // 애니메이션이 완료된 후 클래스 제거
  setTimeout(function() {
    button.classList.remove('button-clicked');
  }, 200);
});

마지막으로, 애니메이션 효과를 위한 CSS를 추가합니다:

.button-clicked {
  transform: scale(0.95);
  background-color: #45a049;
}

클릭하면 버튼이 이제 약간 작아지고 색상이 변경되어, 사용자에게 시각적 피드백을 제공합니다.

챌린지

쉬움

버튼을 클릭하면 시각적 피드백을 위해 CSS 클래스 "button-clicked"를 추가하세요.

클릭 이벤트 리스너 내부에 이 클래스를 적용하는 코드를 추가하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Button Animation Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Interactive Button Demo</h1>
    <p>Click the button below to see a smooth animation effect.</p>
  </header>

  <main class="content">
    <button id="animatedButton" class="btn">Click Me</button>
  </main>

  <script src="script.js"></script>
</body>
</html>