CSS で魅力的なボタンの拡大アニメーションを作成する

はじめに

この実験では、CSS を使用して、ホバー時に拡大アニメーションを持つボタンを作成する方法を学びます。このエフェクトは、ウェブサイトやアプリケーションにインタラクティブ性と視覚的な魅力を加えるために使用できます。transform プロパティと :hover 疑似クラスを適用することで、ユーザーがボタンの上にマウスを乗せたときにボタンを拡大させ、微妙ですが効果的なアニメーションを作成することができます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

ボタンの拡大アニメーション

index.html と style.css は、仮想マシン (VM) 内ですでに用意されています。

ホバー時に拡大アニメーションを作成するには、適切な transition を使用して要素の変更をアニメーション化することができます。:hover 疑似クラスを使用して、transform プロパティを scale(1.1) に変更します。これにより、ユーザーが要素の上にマウスを乗せたときに要素が拡大します。

以下は、使用できるコードの例です。

<button class="button-grow">Submit</button>

.button-grow {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-grow:hover {
  transform: scale(1.1);
}

右下隅にある「Go Live」をクリックして、ポート 8080 でウェブサービスを起動してください。その後、Web 8080 タブを更新すると、ウェブページをプレビューできます。

まとめ

おめでとうございます！ボタンの拡大アニメーションの実験を完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。