高度なアニメーションを使用したインタラクティブな CTA ボタンの作成

この記事では、HTML、CSS、JavaScript を使用して、洗練されたアニメーションと動的な効果を備えた最新の CTA (CTA) ボタンを作成する方法を説明します。このボタンは単なる UI 要素ではなく、ユーザー エンゲージメントを強化し、洗練されたエクスペリエンスを提供するインタラクティブな目玉です。

ボタンの機能

• 動的グラデーショントランジション: 色の変化による目を引くホバー効果。
• アニメーションの拡大縮小と回転: 注意を引く微妙な動き。
• クリック フィードバック: クリックしたときの滑らかな縮小効果。
• 読み込みインジケーター: ナビゲーション前の最新の「リダイレクト中...」メッセージ。
• 完全にレスポンシブなデザイン: すべての画面サイズに最適化されています。

なぜインタラクティブボタンに注目するのでしょうか?

ボタンは、Web インターフェイスの重要な部分です。サインアップ フォーム、プロモーション オファー、またはインディー ゲームの行動喚起のいずれであっても、適切にデザインされたボタンにより次のことが可能になります。

• ユーザー エンゲージメントを高めます。
• 訪問者を特定のアクションに誘導します。
• インターフェイスが洗練され、プロフェッショナルな印象を与えます。

ステップ 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 要素は、Web サイトの外観と雰囲気を変えることができます。このコードを自由に使用し、微調整して、独自のものにしてください。フィードバックや改善点がある場合は、以下のコメント欄で共有してください。 ?