Chapter 03

tailwindcss button / ボタン

knaka Tech-Blog
knaka Tech-Blog
2021.04.29に更新
このチャプターの目次

概要:

button の設定の例になります


関連

https://v1.tailwindcss.com/components/buttons

外観


  • コード

https://github.com/kuc-arc-f/tailwind-sample/blob/main/src/01_button.html

src/01_button.html

01_button.html
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Button-1
    </button>
    <hr class="my-2" />
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
      Button-2
    </button>
    <hr class="my-2" />
    <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
      Button-3
    </button>

  • アウトラインのボタン
01_button.html
    <button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
      Button
    </button>

参考のデモページ

https://kuc-arc-f.github.io/tailwind-sample/src/01_button.html

....