【HTML】グラデーションが動くボタンをつくろう!【CSS】

HTML-CSS

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験から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-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フォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました