ボタンの枠線アニメーションチュートリアル

はじめに

この実験では、CSS を使ってホバー時にボタンの枠線をアニメーションさせる方法を探ります。::before と ::after 疑似要素を使うことで、ボタンの上下に 2 つのボックスを追加し、ホバー時にそれらの幅を 100% に変化させることができます。この実験は、CSS のスキルを向上させ、Web ページにインタラクティビティを追加するのに役立ちます。

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

ボタンの枠線アニメーション

VM 内には既に index.html と style.css が用意されています。

ホバー時に枠線をアニメーションさせるには、::before と ::after 疑似要素を使って、横幅が 24px でボックスの上下に配置される 2 つのボックスを生成します。そして、:hover 疑似クラスを適用して、ホバー時にそれら要素の 幅 を 100% に増やし、transition を使って遷移をアニメーションさせます。

以下はコードの例です。

<button class="animated-border-button">Submit</button>

.animated-border-button {
  background-color: #263059;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}

.animated-border-button::before,
.animated-border-button::after {
  border: 0 solid transparent;
  transition: all 0.3s;
  content: "";
  height: 0;
  position: absolute;
  width: 24px;
}

.animated-border-button::before {
  border-top: 2px solid #263059;
  right: 0;
  top: -4px;
}

.animated-border-button::after {
  border-bottom: 2px solid #263059;
  bottom: -4px;
  left: 0;
}

.animated-border-button:hover::before,
.animated-border-button:hover::after {
  width: 100%;
}

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

まとめ

おめでとうございます！あなたはボタンの枠線アニメーションの実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を練習してください。