Foundation

按鈕

當您需要更多傳統動作時，按鈕是方便的工具。為此，Foundation 有許多易於使用的按鈕樣式，您可以自訂或覆寫以符合您的需求。

建立一個防呆按鈕，可以在所有電子郵件客戶端運作，需要一個巢狀在表格內的表格。在外部 <table> 上加上類別 .button。在內部表格內，加上一個 <a>，其 href 屬性包含您的連結。

在 Inky HTML 中，<button> 標籤會為您建立所有這些標記。

HTML
<button href="#">Button</button>
<html>

<head></head>

<body>
  <table class="button">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Button</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

- 為您的

調整大小

預設情況下，按鈕會依據其內部的內容和內距調整大小。您也可以根據按鈕的父容器調整按鈕大小（請參閱「展開」區段）。

按鈕可以透過在按鈕的外部 <table> 新增類別 .tiny、.small 或 .large 來放大或縮小。

在 Inky HTML 中，將相同的類別新增到 <button> 標籤。

HTML
<button href="#" class="tiny">Tiny Button</button>
<button href="#" class="small">Small Button</button>
<button href="#">Default Button</button>
<button href="#" class="large">Large Button</button>
<html>

<head></head>

<body>
  <table class="button tiny">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Tiny Button</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="button small">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Small Button</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="button">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Default Button</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="button large">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Large Button</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

別忘了 href="" ;)

展開

若要建立展開按鈕（其容器的完整寬度），請將類別 .expanded 新增到按鈕的外層 <table>，並將 <center> 標籤包覆在 <a> 周圍。

在 Inky HTML 中，將 .expanded 類別新增到 <button> 標籤。如果您只想要在小尺寸中展開按鈕，請新增 .small-expanded。

HTML
<row>
  <column>
    <button href="#" class="expanded">Expanded Button</button>
    <button href="#" class="small-expanded">Expand small only</button>
  </column>
</row>
<html>

<head></head>

<body>
  <table class="row">
    <tbody>
      <tr>
        <column>
          <table class="button expanded">
            <tbody>
              <tr>
                <td>
                  <table>
                    <tbody>
                      <tr>
                        <td>
                          <center><a href="#" align="center" class="float-center">Expanded Button</a></center>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
                <td class="expander"></td>
              </tr>
            </tbody>
          </table>
          <table class="button small-expanded">
            <tbody>
              <tr>
                <td>
                  <table>
                    <tbody>
                      <tr>
                        <td><a href="#">Expand small only</a></td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </column>
      </tr>
    </tbody>
  </table>&zwj;
</body>

</html>

示範

著色

透過將類別 .secondary、.success、.warning 或 .alert 新增到外層 <table>（或 Inky HTML 中的 <button> 標籤）來變更按鈕的背景顏色。

HTML
<button href="#" class="secondary">Secondary Button</button>
<button href="#" class="success">Success Button</button>
<button href="#" class="warning">Warning Button</button>
<button href="#" class="alert">Alert Button</button>
<html>

<head></head>

<body>
  <table class="button secondary">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Secondary Button</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="button success">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Success Button</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="button warning">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Warning Button</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="button alert">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Alert Button</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

半徑和圓形

透過將 .radius 或 .rounded 類別新增到按鈕，可以建立具有半徑或圓形邊緣（如藥丸）的按鈕。

注意 - Outlook 2000-2013、Yahoo! Mail 和 Android 4+（Gmail）不支援 border-radius

注意 - 為了建立 .radius 和 .rounded 按鈕，需要移除邊框。

HTML
<button href="#" class="radius">Radius</button>
<button href="#" class="rounded">Round</button>

<html>

<head></head>

<body>
  <table class="button radius">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Radius</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="button rounded">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Round</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

Sass 參考

變數

您可以在專案的 設定檔 中使用這些 Sass 變數，自訂此元件的預設樣式。

名稱類型預設值說明
$button-padding 對應 tiny: 4px 8px 4px 8px
small: 5px 10px 5px 10px
default: 8px 16px 8px 16px
large: 10px 20px 10px 20px

各種尺寸按鈕內的內部填補。
$button-font-size 對應 tiny: 10px
small: 12px
default: 16px
large: 20px

各種尺寸按鈕的字型大小。
$button-color 顏色 $white

按鈕的文字顏色。
$button-color-alt 顏色 $medium-gray

具有淺色背景的按鈕文字顏色。
$button-font-weight 粗細 bold

按鈕的字型粗細。
$button-margin 清單 0 0 $global-margin 0

按鈕周圍的邊界。
$button-background 顏色 $primary-color

按鈕的背景顏色。
$button-border 邊框 2px solid $button-background

按鈕周圍的邊框。
$button-radius 數字 $global-radius

按鈕的邊框半徑。並非所有電子郵件用戶端都支援。
$button-rounded 數字 $global-rounded

圓角按鈕的邊框半徑。並非所有電子郵件用戶端都支援。

ZURB 大師課程 響應式電子郵件

在此線上課程中，您將學習如何快速設計和開發響應式電子郵件，讓電子郵件在幾乎所有螢幕、瀏覽器和電子郵件用戶端上看起來都很美觀，甚至包括 Outlook。

了解 Foundation for Emails

Foundation for Emails

Foundation for Emails 是由位於加州坎貝爾的產品設計公司 ZURB 所建立的響應式 HTML 電子郵件架構。此架構是自 1998 年以來建立網路產品和服務的成果。

想要更多嗎？

與我們聯繫

在推特上發推文給我們
@ZURBfoundation

參與
我們令人驚嘆的社群。

保持更新

掌握 Foundation 的最新資訊。在 Github 上找到我們。

保持聯繫

© 1998‐2018 ZURB, Inc. 保留所有權利。