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

はじめに

この実験では、CSSを使ってボタンにホバー時のフィルアニメーションを作成する方法を学びます。ユーザーがボタンの上にホバーしたときに、:hover疑似クラスを使ってボタンのbackgroundとcolorを変更し、また、変更をアニメーション化するためのトランジション効果を追加します。この実験が終わるとき、ボタンに魅力的なホバー効果を追加することで、ウェブサイトのユーザー体験を向上させることができます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/transitions("Transitions") subgraph Lab Skills css/selectors -.-> lab-35176{{"ボタンのフィルアニメーション"}} css/colors -.-> lab-35176{{"ボタンのフィルアニメーション"}} css/margin_and_padding -.-> lab-35176{{"ボタンのフィルアニメーション"}} css/borders -.-> lab-35176{{"ボタンのフィルアニメーション"}} css/backgrounds -.-> lab-35176{{"ボタンのフィルアニメーション"}} css/pseudo_classes -.-> lab-35176{{"ボタンのフィルアニメーション"}} css/transitions -.-> lab-35176{{"ボタンのフィルアニメーション"}} end

ボタンのフィルアニメーション

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

ホバー時のフィルアニメーションを作成するには、colorとbackgroundプロパティを設定し、変更をアニメーション化するために適切なtransitionを適用します。ホバー時にアニメーションをトリガーするには、:hover疑似クラスを使って要素のbackgroundとcolorプロパティを変更します。以下はコードの例です：

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

.animated-fill-button {
  padding: 20px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}

.animated-fill-button:hover {
  background: #000;
  color: #fff;
}

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

まとめ

おめでとうございます！あなたはボタンのフィルアニメーションの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。