---
tags: 網頁切版直播班 - 2022 夏季班
---

# 7/20(三) 週任務
## 客製化 Button 按鈕元件

承第一週按鈕的任務，練習使用 Tailwind CSS @layer components 與 @apply 來製作按鈕元件，並自行選擇一個客製化主色來取代原先 blue 的顏色


---
Tailwind CSS CDN

<script src="https://cdn.tailwindcss.com"></script>

補充說明：
* Tailwind CSS v3 版本可以在使用 CDN 的情形下使用 config 做樣式的擴充，請參考官網的使用方法：https://tailwindcss.com/docs/installation/play-cdn
* 客製化顏色可參考官網的使用方法：https://tailwindcss.com/docs/customizing-colors#color-object-syntax
* **@apply 的使用要注意**：官方網站上說使用 @apply 的原因不要只是為了想讓 class 變短，且若大量使用 @apply 的話基本上已經違背了 Tailwind 的初衷。
在這個例子會使用是因為
1. button 的 class 設定冗長且複雜(主要是因為包含各式狀態)
2. 每個 btn 的 class 用法都差不多，並且只有微小差距，例如顏色的不同
3. 複用機會非常高

通常 @apply 的使用機會大部分是在自己做的表單元素和按鈕。這部分的說明可參考 [Tailwind 作者的說法](https://www.youtube.com/watch?v=krSgBUmIgP0&list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&index=5&t=309s)。
所以若同學有想使用 @apply 時不妨可以參考一下是否有和 button 或是 form 類似的情況再使用喔！

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：[Codepen 連結](https://codepen.io/AliceChiang/pen/BaJbRbW?editors=1010) -->

回報區
---

| Discord | CodePen |
|:--------------:|:--------------------------------------------------------:|
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/bGvWeZw) |
| Chaoci#2460 | [codepen](https://codepen.io/gmailchao/pen/eYMWeZg) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/JjLNMXz) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/oNqWdoN) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/jOzmdoN) |
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/rNdmPWB?editors=1010)|
|群嘉#3943|[CodePen](https://codepen.io/efzdamnp-the-lessful/pen/NWYgGqZ?editors=1011)|
|LinaChen#1796|[CodePen](https://codepen.io/LinaChen/pen/JjLJYzB)|
|雷雷#7844|[CodePen](https://codepen.io/lei-yi-jie/pen/KKoqzeL?editors=1010)|
|How#5806|[CodePen](https://codepen.io/howtobefine/pen/GRxErEz)|
|bakiii#2652|[codepen](https://codepen.io/aki168/pen/MWVooYw)|
|Clara#1275|[CodePen](https://codepen.io/bsupixqu/pen/xxWrbJo?editors=1010)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/KKoqQeE?editors=1010)|
|yuyu#6310|[Codepen](https://codepen.io/yuyu0905/pen/WNzOJjp?editors=1000)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/PoRjLdv)|
| Yunei#6323 |[Codepen](https://codepen.io/Yunei/pen/abYwryz)|
| Rita916#4384 |[Codepen](https://codepen.io/rita0916/pen/XWEgwLm)|
| Peng#9811 |[Codepen](https://codepen.io/peng-027/pen/NWYvroP)|
| annanna#6011 |[Codepen](https://codepen.io/annaprosty/pen/QWmMEoj)|
| 布魯諾#7239 |[Codepen](https://codepen.io/bruno-yu/pen/zYWdqZV?editors=1010)|
| 𝓛𝓊𝒸𝓎#8635 |[Codepen](https://codepen.io/lucygirl/pen/yLKoopz)|
| Ringo #7583 |[Codepen](https://codepen.io/ringolai1988/pen/ZExXERQ?editors=1010)|
|家洋 #6999 | [CodePen](https://codepen.io/aa235553756/pen/PoRKrZe)|
|大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/GRxMJvN)|
|Roceil#5501 | [CodePen](https://codepen.io/Roceil/pen/MWVEvyb)|
|Fang #4680|[Codepen](https://codepen.io/std95174/pen/qBoPMYy?editors=1010)|
|瑞追 #8227|[CodePen](https://codepen.io/owlu0905/pen/abYLRYr)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/GRxOBom)|
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/zYWpYJx?editors=1010)|
|Tori#1248|[CodePen](https://codepen.io/FlyTori/pen/GRxyJPZ)|
|EmilyLin#0526|[CodePen](https://codepen.io/c199615/pen/oNqpZyq?editors=1010)|
|Cliff#4606|[CodePen](https://codepen.io/Cliff_hex/pen/RwMMJaJ?editors=1011)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/JjLvvaY)
|hungya#0773|[CodePen](https://codepen.io/hungya777/pen/BarqZJG?editors=1010)|
| 肉桂卷#0625|[CodePen](https://codepen.io/ginnlee/pen/OJvdENY?editors=1010)|