看似複雜的質感按鈕，實則是多層矩形疊加與漸層邊緣控制的精密組合。本教學拆解一款集外發光邊框、內凹陰影、頂部高光帶、角落鉚釘裝飾於一體的超酷按鈕，展示 Fireworks 矩形工具的極致發揮。

效果預覽

圖層結構拆解 (自下而上)

1. 底座陰影層： 483×450px 畫布底部大圓角矩形，填充深灰漸層，模擬按鈕底座厚度投影。

2. 主體背景層： 336×78px 圓角矩形，填充主題色線性漸層 (如 #2C7BE5 → #1A5BB8)，內陰影 (距 2px, 模糊 4px, 透明度 30%) 營造內凹感。

3. 內容區層： 322×65px 圓角矩形 (較主體內縮 7px)，填充深色漸層 #0D2B5E → #153A7A，模擬內凹內部深度。

4. 頂部高光帶（核心技法）：
   • 繪製 200×1px 矩形，填充白→透明線性漸層 (左透→中白→右透)。
   • 複製 → 向下移動 1px → 色相/飽和度調整 (色相 -10, 飽和度 +20) → 合併兩層 → 得「雙色高光帶」(白暖白雙色過渡，極具金屬質感)。
   • 複製 3 份，縮放適配四角圓角處，精準貼合圓角曲率。
   
5. 文字/圖標層： 白色文字，外發光 (白, 疊加, 模糊 2px, 透明度 50%)，增強可讀性與發光感。

關鍵技法總結

技法	實現方式	視覺功能
雙色高光帶	1px 矩形 + 複製 1px 偏移 + 色相微調 + 合併	模擬金屬邊緣雙色溫反光帶
角落自適應	高光帶複製縮放貼合圓角	消除直線高光在圓角處的斷裂感
內凹層疊	三層矩形逐層內縮 + 漸層遞深	構建多層次內凹空間深度
底座分離	獨立大圓角矩形 + 投影	確立按鈕懸浮於底座之上的空間關係

狀態擴展系統

建立「按鈕狀態變量表」，僅修改關鍵參數生成四態：

狀態	主體漸層亮度	高光帶不透明度	內陰影深度	底座陰影
正常	100%	100%	基準	顯示
懸停	+15%	120%	加深	擴大
按下	-10%	50%	翻轉為內高光	縮小/消失
禁用	去飽和 80%	0%	移除	保留

元件化輸出

存為「圖形元件」，9 切片縮放區 (四角固定圓角，邊緣單向，中心雙向)，屬性面板暴露：`文字`、`主題色`、`圖標`、`狀態` 四大可編輯屬性，構建專屬質感按鈕設計系統。