---
tags: 網頁切版直播班 - 2022 夏季班
---
# 7/13(三) 週任務

## 製作 Button 按鈕
請使用 Tailwind CSS 做出以下圖示中的按鈕，分別有三種形式。
1. 一般按鈕 2. 淺色按鈕 3. 加入 icon 的按鈕


Icon Code:

<svg width="20" height="20" fill="currentColor" aria-hidden="true">
<path d="M10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 1-1Z" />
</svg>

並請注意按鈕在不同狀態下的樣式變化
1. hover 狀態

2. focus 狀態

3. disabled 狀態

---
加分題：
- 製作出不同大小的按鈕
- 製作出圓角的按鈕
---

Tailwind CSS CDN

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

## 回報流程

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


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

回報區
---

| Discord | CodePen |
|:-----------:|:--------------------------------------------------------:|
| Anna Liu#3794 | [codePen](https://codepen.io/anna618/pen/YzapWrw) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/abYmXJY) |
| Chi#7605 |[Codepen](https://codepen.io/YoChi84/pen/LYdRMjL) |
| RyanTsai#8906 | [codePen](https://codepen.io/linlaose/pen/ExEgMLq) |
| Cliff#4606 | [codePen](https://codepen.io/Cliff_hex/pen/poLExGd) |
| JackC#0411 | [codePen](https://codepen.io/key0329/pen/MWVjLLr) |
| How#5806 | [codePen](https://codepen.io/howtobefine/pen/rNdMgmG) |
| 布魯諾#7239 | [codePen](https://codepen.io/bruno-yu/pen/dymOPyN) |
| 黑白兔#0684 | [codePen](https://codepen.io/johnny329/pen/YzaGJMK?editors=1100) |
| christina#6185 | [codepen](https://codepen.io/chrisc0210/pen/LYdbEjy) |
| mickey#8745 | [codepen](https://codepen.io/weizhetseng/pen/zYWoGRW) |
| Clara#1275 | [codepen](https://codepen.io/bsupixqu/pen/ZExBGQL?editors=1000) |
|WEI_RIO#9342|[codePen](https://codepen.io/wei_wu/pen/NWYbqYr?editors=1010)|
|Kyle, Chuang#1892|[codePen](https://codepen.io/hohayo/pen/ZExBQQg)|
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/rNdWxgW) |
|群嘉#3943|[CodePen](https://codepen.io/efzdamnp-the-lessful/pen/QWmGNpN?editors=1000)|
|小諾#1866|[CodePen](https://codepen.io/noichan/pen/WNzoxXd)|
|雷雷#7844|[CodePen](https://codepen.io/lei-yi-jie/pen/dymOOpq)|
|ZY HSu|[Codepen](https://codepen.io/zihyin/pen/bGvBgKa)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/bGvBqmJ?editors=1000)|
|Chaoci#2460|[Codepen](https://codepen.io/gmailchao/pen/ExENKZo?editors=1100)|
|𝓛𝓊𝒸𝓎#8635|[CodePen](https://codepen.io/lucygirl/pen/RwMoWXg)|
|Benson#6763|[CodePen](https://codepen.io/kumashow/pen/VwXmxEy)|
| PeggyLiao#1552| [CodePen](https://codepen.io/PeiJu-Liao/pen/ZExByej?editors=1000) |
| Peng#9811| [CodePen](https://codepen.io/peng-027/pen/mdxOjyy) |
| 粉蒸肉#6214| [CodePen](https://codepen.io/wrightyu/pen/abYmReX?editors=1100)
| Denny#4531| [CodePen](https://codepen.io/Denny__Lin/pen/MWVbqbM?editors=1100)
| Angus#7405| [CodePen](https://codepen.io/angushyx/pen/oNqYJBY)
| OMing#7570| [CodePen](https://codepen.io/BigMine/pen/MWVJwKK?editors=1010)
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/abYpOVV)|
|LINK#1933| [CodePen](https://codepen.io/miyayoe/pen/abYpOGq)|
|Rita916#4384| [CodePen](https://codepen.io/rita0916/pen/BarpKQe)|
|Emily Hsi #9066| [CodePen](https://codepen.io/EmilyHsi/pen/YzapyOG)|
|Yikai#5846| [CodePen](https://codepen.io/kai7280/pen/gOegrjN)|
|咻蹦#1526| [CodePen](https://codepen.io/emmasyu/pen/bGvgqLx?editors=1000)|
|Vera#5592| [CodePen](https://codepen.io/skvera/pen/QWmKPVL)|
|Kevin#6131| [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/MWVJvxW)|
|RayChen#6088| [CodePen](https://codepen.io/raychen1996/pen/mdxRBxv)|
|瑞追#8227| [CodePen](https://codepen.io/owlu0905/pen/dymNZZx) |
|Gui#9571| [CodePen](https://codepen.io/guitimliu/pen/NWYdwyj)
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/NWYdyjQ)
|kancheng#3915|[codepen](https://codepen.io/kancheng/pen/VwXPQmX)
|Ron Liang #7277|[codepen](https://codepen.io/ron-go/pen/gOegwBz)
|ajhappy#6488|[codepen](https://codepen.io/ajhappy5438/pen/ZExeYqg)|
|yuyu#6310|[codepen](https://codepen.io/yuyu0905/pen/YzaNbZL?editors=1000)|
|Ringo #7583|[codepen](https://codepen.io/ringolai1988/pen/vYRxYBP)|
|Roceil#5501|[Codepen](https://codepen.io/Roceil/pen/BarWjaR)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/zYWZwzo)|
|LinaChen#1796|[CodePen](https://codepen.io/LinaChen/pen/yLKVeLr)|
|Tree#3414|[CodePen](https://codepen.io/andrew781026/pen/JjLWMJj)|
|Steve#9699|[CodePen](https://codepen.io/ycsteve/pen/qBoRwGR?editors=1100)|
|Manson許#2295|[CodePen](https://codepen.io/oupbzfxq-the-scripter/pen/vYRxoXL)|
|bakiii|[codepen](https://codepen.io/aki168/pen/NWYpmOM)|
|44#6963|[codepen](https://codepen.io/lin-b/pen/abYmQzM?editors=1000)|
|大衛#4869|[codepen](https://codepen.io/exnsrpjc/pen/ExEmaaG?editors=1000)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/BarRoGK?editors=1010)
| Yunei#6323 |[Codepen](https://codepen.io/Yunei/pen/WNzOKwq)
| annanna#6011 |[Codepen](https://codepen.io/annaprosty/pen/rNdwPeb)
| NeilLin#3009 |[Codepen](https://codepen.io/a0071421/pen/YzaQgaO)
| 我是泇吟 #5189 | [Codepen](https://codepen.io/kljuqbxs/pen/WNzOBqP) |
| clemmyyy#0291 | [Codepen](https://codepen.io/jwonjwonsdaughter/pen/xxWropX) |
| EmilyLin#0526 | [Codepen](https://codepen.io/c199615/pen/PoRKzyg?editors=1000) |
| Fang#4680 | [Codepen](https://codepen.io/std95174/pen/GRxvQay?editors=1000)|
|家洋#6999|[Codepen](https://codepen.io/aa235553756/pen/yLKMPgb)|
|hsufengs#2816|[Codepen](https://codepen.io/Fenghsu/pen/wvmrwjp)|
|Evan#8671|[Codepen](https://codepen.io/Evan_9837/pen/abYLqZX)|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/Barmvpb?editors=1000)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/bGvBgrr?editors=1100)|
|周周#3503|[Codepen](https://codepen.io/jhoujhou-the-decoder/pen/abYEOLR?editors=1010)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/GRxyJPZ?editors=1010)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/mdxmewY)|
|肉桂卷#0625|[Codepen](https://codepen.io/ginnlee/pen/OJvaYxN?editors=1000)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/MWXYrzG) |
| Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWzVWLN?editors=1000) |
| GL#2256 | [Codepen](https://codepen.io/4genie/pen/QWJYoBz) |