開発 デザイン

【CSS】スーパーボール系ページネーションを作る

ページネーション(Pagenation)…番号送りのこと(ブログ等のページ下部によくある)

グラデーションを使ってページネーションをカスタマイズする方法ですが、単色の場合にも応用できます。

グラデーション(linear-gradient)はimgに属するため、background-colorではなくbackgroundで指定する。

初期状態↓

これをカラフルにカスタマイズします!

やり方

現在のページだけ色を変更する

完成図

他のボタンをホバーした時に色を表示させる

完成図

2ページ目のボタンをホバーした場合

ボタンごとにホバーした時の色を変える

nth-child(n)を使って、n番目の要素を指定する。

nth-childとhoverは:でつなぐことで同時に使用できる。

2つ目をホバーした場合

3つ目をホバーした場合

全部のボタンの色を最初から表示させる

2色のスーパーボールを作りたい

全然違う色同士を組み合わせると、グラデーションでも色がはっきり分かれて見える。

完成図

-開発, デザイン
-

© 2021 Studio Yamimin Powered by AFFINGER5