🚀

【Tailwind CSS】ホバー時に反転するグラデーションボタンを作る小ワザ

1 min read

概要

Tailwind CSSでホバー時に反転するグラデーション(背景色)ボタンを作成するときのちょっとした小ワザを(たまたま発見したので)残しておきます。

※普通に知られていることだったらすみませんm(__)m笑

完成品

こんなボタンを作成したい。
(左:通常時、右:ホバー時)

コード

<div class="p-10">
  <button class="bg-gradient-to-b from-blue-800 to-blue-400 text-white py-2 px-6 rounded-md text-2xl">反転前</button>
  <button class="bg-gradient-to-b hover:bg-gradient-to-t from-blue-800 to-blue-400 text-white py-2 px-6 rounded-md text-2xl">反転後</button>
</div>

上コードのこの部分がグラデーションを反転するためのコードです。

bg-gradient-to-b hover:bg-gradient-to-t from-blue-800 to-blue-400

(Tailwind CSSのHPでブラウザエディターが使えます)

https://play.tailwindcss.com/

グラデーション(背景色)の付け方

公式ドキュメント通りです。

https://tailwindcss.com/docs/background-image#class-reference

上から下にかけてグラデーションをつけたい場合はbg-gradient-to-bをタグのclassに指定してあげて、

  • from-色:始点(1番上)の色
  • to-色:終点(1番下)に色

を指定します。

なので、全体としてはこんな感じです。

class="bg-gradient-to-b from-色 to-色" 

ホバー時の反転

Tailwind CSSでホバー時のスタイルを定義する時は

class="hover:bg-red-300"

みたいにhover:をつけます。

今回のケースだと

通常時:bg-gradient-to-b from-blue-800 to-blue-400
ホバー時(反転時):bg-gradient-to-t from-blue-800 to-blue-400

をそれぞれclass属性に設定しなければならないのかと思いました。

でもこの設定で反転できた。

bg-gradient-to-b hover:bg-gradient-to-t from-blue-800 to-blue-400

(ちなみにhover:bg-gradient-to-tの記載位置はclass属性の中のどこでもOK)

最後に

Tailwind CSSは業務でNext.jsを使うことになってせっかくなのでと思って導入したけど、.tsxファイルだけでコーディングもスタイルも(ほぼ)完結できるので便利だなと思いました!

(クラス名を全然知らないのでめちゃくちゃググっているけどw)

Discussion

ログインするとコメントできます