一発コピーで使えるグラデーションボタン

本来はクラス(class)での管理をおすすめしますが、使用頻度が低くスタイルシートで管理するほどでもない場合など、その都度さっと使えるかと思います。背景色と文字色がしっかり指定されていればダークモード対応などで視認性が落ちることもほとんどありません。

また、背景に対する文字色の指定で結構悩むこともありますよね。今回は WCAG2.1 Contrast Minimum(AA) に合格する内容にしてあります。黒文字から白文字に変更したくなりそうな色合わせもあるかと思いますが、WCAGの国際基準に合致しなくなりますので変更の際はその点を踏まえた上自己責任で。

href属性 の値(リンクアドレス)とテキストの書き換えはしっかり行ってください。

* 気に入る組み合わせを見つけ次第随時追加を行います。

基本文字サイズ(記事での文字大きさ)を踏襲します。目立つデザインですから圧迫感を感じたりなど他テキストとのバランスが悪いと感じる場合は font-size: .9em など、少し小さめに調整すると良いかもしれません。以下のサンプルは全て 1.5rem(15px) での表示です。

* 使用を希望するボタンをクリックするとHTMLを取得できます。