曜輝工作室的網站設計費用大概多少？

<svg width="0" height="0" style="position:absolute; visibility:hidden;">
  <defs>
    <radialGradient id="shared-brand-gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(201.724 -4.49998) rotate(166.519) scale(182.313 336.654)">
      <stop stop-color="#E8DFD6"/>
      <stop offset="1" stop-color="#9B6C3A"/>
    </radialGradient>
  </defs>
</svg>

步驟二：按鈕 HTML 結構

按鈕本體包含外層連結、SVG 圖形以及獨立的文字節點。在 SVG 的矩形區塊中，透過 fill 屬性指向剛剛設定好的漸層 ID 即可載入效果。

<a href="https://example.com/sample-path/" class="button-link">
  <div class="consultation-button">
    <svg viewBox="0 0 147 53" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="0.5" y="0.5" width="146" height="52" rx="26" stroke="#9B6C3A"/>
      <rect x="3.5" y="3.5" width="140" height="46" rx="23" fill="url(#shared-brand-gradient)"/>
      <path d="M121 26.2333L113 22.5L115.667 26.2333L113 30.5L121 26.2333Z" fill="white"/>
    </svg>
    <span class="button-text">預約諮詢</span>
  </div>
</a>

步驟三：CSS 樣式與變數控制

利用 CSS 變數（CSS Variables）來集中管理按鈕的寬高與字級，後續只要修改 :root 內的數值，就能連動更新按鈕外觀。文字部分則透過絕對定位與 transform 精準置中於 SVG 上方。

<style>
/* 按鈕大小控制 - 可以自由調整這些數值 */
:root {
  --button-width: 147px;     /* 預設寬度，可改成 200px, 15vw, 100% 等 */
  --button-height: 53px;     /* 預設高度，可改成 60px, 4vw 等 */
  --button-font-size: 16px;  /* 文字大小，可改成 1rem, 1.2vw 等 */
}

/* 連結樣式 */
.button-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.consultation-button {
  position: relative;
  width: var(--button-width);
  height: var(--button-height);
  cursor: pointer;
  display: inline-block;
  /* 自適應：最小寬度保護 */
  min-width: 120px;
  min-height: 40px;
}

.consultation-button svg {
  width: 100%;
  height: 100%;
  /* 保持比例不變形 */
  display: block;
}

.button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--fcfcfc, #FCFCFC);
  font-family: "Noto Serif TC", serif;
  font-size: var(--button-font-size);
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  /* 自適應：防止文字過長 */
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 滑鼠懸停效果 */
.button-link:hover .consultation-button {
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* 點擊效果 */
.button-link:active .consultation-button {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* 移除連結的預設樣式 */
.button-link:focus {
  outline: none;
}
</style>

踩坑提醒與實務建議

在實際套用至專案時，有幾個影響跨瀏覽器相容性與使用者體驗的細節需要特別留意：

避開 Safari 的漸層消失陷阱
用來存放 defs 的全域 SVG 容器，務必使用 visibility: hidden; position: absolute; 來隱藏。如果直接設定 display: none;，在 iOS 或 Safari 瀏覽器中會導致漸層資源無法被渲染，按鈕背景將會變成空白。

處理文字層的事件穿透：在 .button-text 加上 pointer-events: none; 是不可省略的。若未加上此設定，當游標精準停留在文字上時，會干擾外層 <a> 標籤的 hover 偵測，導致按鈕產生不自然的閃爍或點擊失效。
維持 SVG 原生比例：利用 CSS 變數覆寫外層寬高時，SVG 標籤本身的 viewBox 屬性必須保留。這樣才能確保內部圖形（如圓角矩形、箭頭）在縮放時進行向量運算，不會發生生硬的裁切或變形。