みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
1分で理解できるHTML/CSS講座シリーズです。
今回はホバーするとグラデーションが動くボタンについて学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 1分でグラデーションの設定方法がわかる
- 1分でホバーするとグラデーションが動くボタンが作れる
1分で理解できるHTML/CSS講座シリーズはじめっ!
グラデーションの付け方
グラデーションをつけるにはlinear-gradientを使います
グラデーションの構文はこのように記述します
/* 傾き等, 開始色, 中間色 中間位置, 終了色);*/
linear-gradient(45deg, red, green 50%, blue);
See the Pen グラデーション by samehack (@samehack) on CodePen.
これは、“45度傾きがあり、赤〜50%の位置で緑〜青”というグラデーションになります。
ちなみにグラデーションはbackground-colorプロパティではなく、
backgroundもしくはbackground-imageプロパティに使うよ!
backgroundもしくはbackground-imageプロパティに使うよ!
ホバーでグラデーションを動かそう
background-sizeで拡大設定しよう
background-sizeは背景画像のサイズ設定をするプロパティで
以下のように記述します。
/* 画像の幅 画像の高さ */
background-size: 200% auto;
これで、背景のグラデーションを2倍に拡大して表示することができました。
background-positionで表示位置を変えよう
背景自体は2倍になったので、background-positionを指定して
表示位置をホバー前後で異なる値にし、
あたかも背景が流れているかのように設定します。
background-positionはこのように指定します。
/* 位置 */
background-position: top;
/* よく使われる位置設定 */
/* top bottom left right center */
ホバーアクションをつけよう
先程の2つのプロパティを組み合わせて、
ホバーすることで左から右に動いているかのようなボタンを作ります。
See the Pen Untitled by samehack (@samehack) on CodePen.
まとめ
- 背景をグラデーション
- background: linear-gradient(傾き, 開始色, 中間色 中間位置, 終了色);
- 背景のサイズ設定
- background-size: 幅 高さ;
- 背景の表示位置設定
- background-position: 位置;
- ホバー時のアクション
- 要素名:hover
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈