고급 애니메이션을 사용하여 대화형 CTA 버튼 만들기

이 기사에서는 HTML, CSS, JavaScript를 사용하여 세련된 애니메이션과 동적 효과를 갖춘 현대적인 클릭 유도 문구(CTA) 버튼을 만드는 방법을 살펴보겠습니다. 이 버튼은 단순한 UI 요소가 아니라 사용자 참여를 향상하고 세련된 경험을 제공하는 인터랙티브 중심 요소입니다.

버튼 기능

• 동적 그라데이션 전환: 색상 변경으로 시선을 사로잡는 호버 효과.
• 애니메이션 크기 조정 및 회전: 주의를 끌기 위한 미묘한 움직임.
• 클릭 피드백: 클릭 시 부드럽게 축소되는 효과
• 로딩 표시기: 탐색 전 현대적인 "리디렉션 중..." 메시지.
• 완전 반응형 디자인: 모든 화면 크기에 최적화되었습니다.

인터랙티브 버튼에 집중하는 이유는 무엇인가요?

버튼은 모든 웹 인터페이스에서 중요한 부분입니다. 가입 양식, 판촉 제안, 인디 게임에 대한 클릭 유도 문구 등 잘 디자인된 버튼으로 다음을 수행할 수 있습니다.

• 사용자 참여도를 높이세요.
• 방문자에게 특정 행동을 안내합니다.
• 인터페이스를 세련되고 전문적인 느낌으로 만드세요.

1단계: HTML 구조

버튼의 기본 구조는 다음과 같습니다. 광고 컨테이너에는 콘텐츠와 그래픽이 들어 있고, CTA 버튼은 주요 대화형 요소 역할을 합니다.

<div>



<p>Step 2: CSS Styling<br>
The CSS brings the button to life with gradients, hover effects, and animations.<br>
</p>

<pre class="brush:php;toolbar:false">body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: radial-gradient(circle at top, #141E30, #243B55);
  color: white;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.ad-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  backdrop-filter: blur(15px);
  box-shadow: 0px 25px 60px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
  width: 90%;
  max-width: 1300px;
  animation: slideIn 1.5s ease-out;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.cta-button {
  display: inline-block;
  padding: 15px 35px;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  background: linear-gradient(45deg, #ff416c, #ff4b2b);
  border-radius: 50px;
  box-shadow: 0px 10px 25px rgba(255, 65, 108, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulse 3s infinite alternate;
}

.cta-button:hover {
  transform: scale(1.15) rotate(2deg);
  box-shadow: 0px 15px 30px rgba(255, 65, 108, 0.7);
  filter: brightness(1.2);
}

주요 CSS 하이라이트:

• 호버 효과: 버튼의 크기가 조정되고 약간 회전하여 역동적인 상호 작용을 만듭니다.
• 그라데이션 배경: 선형 그라데이션을 사용하여 현대적이고 생동감 넘치는 모습을 연출하세요.
• 박스 섀도우: 레이어드 섀도우로 버튼에 깊이를 더해보세요.

3단계: JavaScript로 상호작용 추가

JavaScript는 응답성이 뛰어난 피드백과 원활한 사용자 경험을 제공합니다.

const ctaButton = document.querySelector('.cta-button');

// Dynamic gradient change on hover
ctaButton.addEventListener('mouseover', () => {
  ctaButton.style.background = 'linear-gradient(90deg, #1e90ff, #00c6ff, #00ffa3)';
  ctaButton.style.boxShadow = '0px 15px 35px rgba(30, 144, 255, 0.6)';
  ctaButton.style.transform = 'scale(1.1) rotate(-2deg)';
  ctaButton.style.transition = 'all 0.3s ease';
});

// Reset on mouse out
ctaButton.addEventListener('mouseout', () => {
  ctaButton.style.background = 'linear-gradient(45deg, #ff416c, #ff4b2b)';
  ctaButton.style.boxShadow = '0px 10px 20px rgba(255, 65, 108, 0.5)';
  ctaButton.style.transform = 'scale(1) rotate(0deg)';
  ctaButton.style.transition = 'all 0.3s ease';
});

// Click action
ctaButton.addEventListener('click', () => {
  ctaButton.style.pointerEvents = 'none';
  ctaButton.style.transform = 'scale(0.95)';
  alert('Redirecting you to the game showcase page!');
  setTimeout(() => {
    window.location.href = 'https://gladiatorsbattle.com/indie-games';
  }, 1500);
});

라이브 데모

CodePen에서 라이브 데모를 통해 버튼이 실제로 작동하는 모습을 볼 수 있습니다. 스타일과 애니메이션을 다양하게 활용하여 나만의 스타일을 만들어보세요!

https://codepen.io/HanGPIIIErr/pen/WNVqOyq

이것이 중요한 이유

간단한 버튼은 단순한 UI 요소가 아니라 인상을 남길 수 있는 기회입니다. 제품을 홍보하든, 사용자를 특정 작업으로 안내하든, 세련된 대화형 버튼은 사용자 경험을 향상하고 전환을 유도합니다.

당신의 인디 게임을 홍보해보세요!

당신의 프로젝트를 선보이고 싶은 인디 게임 개발자이신가요? GladiatorsBattle.com에서 게임을 업로드하고 점점 커지는 커뮤니티와 소통할 수 있는 무료 플랫폼을 확인하세요. 여기 Discord 커뮤니티에 가입하는 것을 잊지 마세요: https://discord.gg/YBNF7KjGwx.

크리에이터를 위한 멋진 커뮤니티를 함께 만들어 보세요! ?

결론

이 CTA 버튼과 같은 대화형 UI 요소는 웹사이트의 모양과 느낌을 바꿀 수 있습니다. 이 코드를 자유롭게 사용하고 수정하여 자신만의 코드로 만들어 보세요. 피드백이나 개선 사항이 있으면 아래 댓글로 공유해 주세요! ?

위 내용은 고급 애니메이션을 사용하여 대화형 CTA 버튼 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!