Day 19 - 写一个含状态的 Button

既然今天是连假第二天，咱们今天来点简单的，把前面复习一下加一点新知识，整合一个有各种状态的按钮样式吧。我们拿 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 也可以制做组件，威尔猪明天再谈。以上就是今天按钮及状态的介绍，咱们明天见。