軟用戶介面按鈕

1. 基本顏色
2. 主色調
3. 二級陰影
4. 懸停效果

基本顏色

在設計軟 UI 風格的按鈕時，您的目標是確保按鈕的基底色與容器的背景顏色一致。例如，我們將同步一個的預設背景色調 按鈕 組件與我們項目中的頂部部分。

要同步背景音：

1. 介紹一個 按鈕 元素到你的工作區
2. 選擇後 按鈕，在中指定一個類別名 選擇器 欄位（例如“按鈕”）
3. 在裡面 風格面板，使用吸管選取該部分的顏色並將其應用到 羈扣 背景

現在，您有一個與頂部部分的背景顏色相符的按鈕。

基地設計完成。接下來，讓我們透過製作主陰影（按鈕右下角的陰影）來增強按鈕的外觀。

主色調

我們將在 UI 軟按鈕的右下緣引入陰影效果。此外，您還可以靈活調整陰影設定以達到所需的視覺效果。

引入初始陰影：

1. 隨著 按鈕 選中後，點擊旁邊的加號圖標 盒子陰影 在裡面 風格面板
2. 量身訂製 盒子陰影 設定以適合您的設計（例如修改 距離, 模糊, 尺寸， 和 顏色)

選擇較暗的陰影作為初始陰影（例如#000000或黑色），然後降低較暗色調的不透明度（例如將不透明度調整為80%）可以使陰影與背景顏色無縫混合，從而產生更逼真的效果。

二級陰影

讓我們引入另一個陰影，但這一次，我們將改變相對側的角度（以創建與第一個陰影的偏移）。此外，鑑於第一個陰影較暗，我們將為第二個陰影使用較淺的色調（例如#ffffff或白色）。

建立第二個陰影：

1. 隨著 按鈕 再次選擇，點擊旁邊的加號圖標 盒子陰影 在裡面 風格面板 產生第二個陰影
2. 調整 盒子陰影 設定為較淺的色調（例如 #ffffff 或白色）

諾塔貝尼：如果您的背景色調是白色，則此技術可能無效。軟 UI 按鈕需要一側比背景更暗、另一側比背景更亮的陰影。

懸停動畫

在元素的不同狀態之間轉換時，過渡在生成無縫動畫方面發揮關鍵作用。

在這種情況下，我們的目標如下：我們的目標是當按鈕懸停在上方時稍微修改陰影以模仿抬起的外觀。

懸停狀態

透過選擇我們的 按鈕，我們將導航到 徘徊 狀態。

這可以透過兩個簡單的步驟來完成：

1. 點擊其中的下拉箭頭 選擇器 部分
2. 選擇 滑鼠移到 影響

之後，導覽至 Shadow 屬性（在 滑鼠移到 效果）來自訂初始和輔助陰影。

擴大陰影大小，並微調所有陰影屬性以實現懸停效果，呈現出抬起按鈕的外觀。

按 Esc鍵 鍵恢復到 普通的 陳述並預覽 滑鼠移到 設計畫布上的效果。

平穩過渡

為了確保無縫且漸變的動畫，讓我們設定一個過渡。

選擇 Neumorphic 按鈕後，訪問 過渡 段內的 造型面板。介紹一個 盒子陰影 過渡（因為這是我們希望設定動畫的元素），並指定動畫的持續時間。

整個過程就到此結束了！您現在已經在 Webflow 中成功建立了一個擬態按鈕。