【Tailwind CSS】立体感・透明感のある丸ボタンの作り方

Tailwind CSS を使って、以下のような立体感・透明感のある丸ボタンを作ってみたので、コード（HTML）を紹介します。LPや、ゲーム系のデザインのページなどに使いやすいかと思います。

コード（HTML）

コードは以下の通りです。

<a
  href="#"
  class="inline-block w-[140px] aspect-square
    bg-gradient-to-b from-red-800 to-red-600 
    rounded-full text-xl font-bold p-1 overflow-hidden">
  <div
    class="bg-gradient-to-b via-red-800 to-red-500
      w-full h-full rounded-full relative overflow-hidden
      before:absolute before:-top-1/3 before:left-0
      before:w-full before:h-full
      before:bg-gradient-to-b
      before:from-red-400  before:to-red-600
      before:rounded-full">
    <div
      class="absolute w-full h-full grid place-content-center p-2
        text-white text-3xl [text-shadow:1px_1px_2px_#00000033]">
      PUSH
    </div>
  </div>
</a>

構造的には、大まかに以下の４つの要素で構築されています。

• 枠線（一番外側）

• 枠線の内側

• 枠線の内側の上部分（擬似要素の部分）

• テキスト部分

カラーやグラデーションの具合など、お好みで微調整してみてください。

弊社では、初期費用のかからないホームページ制作・運用のサービスを行なっております。お気軽にお問い合わせください。