既然今天是連假第二天，咱們今天來點簡單的，把前面複習一下加一點新知識，整合一個有各種狀態的按鈕樣式吧。我們拿 Bootstrap 的 Primary 按鈕來練習好了。

1. Button Normal 狀態：
   

我們先建立一個基本按鈕，並依樣畫葫蘆給它顏色、間距、圓角等，這邊各位小伙伴們應該都會吧。

<button type="button" class="px-3 py-2 bg-blue-500 border border-blue-500 rounded text-white">Button</button>

2. Button Hover 狀態：
   

可以看到 Hover 按鈕後背景顏色加深了一點，這邊有個小細節，顏色加深是緩慢變的，不是瞬間變色，所以我們要補個 Transition。

<button type="button" class="... transition hover:bg-blue-600">Button</button>

3. Button Focus 狀態：
   

點擊按鈕後，Bootstrap 外圈多了一道半透明光環，但 Tailwind 按鈕預設會有一個 1px outline，我們必須用 outline-none 把它消除，這邊威爾豬前面沒有說到，在 Tailwind 裡，外圈像戒指一樣，所以就是用 ring-{寬度} 來代表，它是使用 box-shadow 的方式來增加外圈，預設共有 0、1、2、3、4、8 (px)。

<button type="button" class="... focus:outline-none focus:bg-blue-600 focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50">Button</button>

同學們問威爾豬，focus 要寫這麼多，有沒有更簡潔的辦法或只寫一次就好？這邊要說聲抱歉，威爾豬自己也很困擾，但目前 Tailwind 好像沒辦法支持這麼做，如果有小伙伴們知道可以只寫一次的方法，也請再跟威爾豬分享，期待 Tailwind 之後的更新也能改進這一塊。

4. Button Active 狀態：
   

可以看到 Active 後背景顏色更深一點了。

<button type="button" class="... active:bg-blue-700">Button</button>

5. 完工
   

噹噹～恭喜完成，因為威爾豬直接使用 Tailwind 內建的色系，顏色肯定會有誤差，但是不是幾乎和 Bootstrap 的按鈕一模模一樣樣，威爾豬這邊有用 Tailwind 來仿製了 Bootstrap 的群組按鈕樣式，同學們可以參考 DEMO。

雖然製做按鈕真的不如 Bootstrap 上快速方便，但畢竟彈性較高，可以任意修改，其實 Tailwind 也可以製做組件，威爾豬明天再談。以上就是今天按鈕及狀態的介紹，咱們明天見。