フォカッチャフォカッチャ

【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>

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

  • 枠線(一番外側)

  • 枠線の内側

  • 枠線の内側の上部分(擬似要素の部分)

  • テキスト部分

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

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

この記事をシェアしよう!
  • 渡邊 陽平
    渡邊 陽平
    株式会社フォカッチャ代表
    Webエンジニア|Webデザイナー|個人開発|九大芸術工学部 (音響設計) 卒|元TuneCore Japan|趣味は作曲|Next.js / NestJS / Supabase / Unity / Flutter