5 個創意 Divi 按鈕模塊設計及其製作方法

在這篇文章中，我將向您展示 5 個創造性的 Divi 按鈕模塊設計，您可以使用 Divi 的按鈕模塊輕鬆實現。 按鈕模塊是所有 Divi 模塊中最受歡迎的模塊之一，因為按鈕對於引導訪問者在整個網站上實現您想要的目標非常重要。 因此，作為設計師和開發人員，讓這些按鈕具有吸引力和吸引力是非常重要的。

讓我們深入了解！

搶先看

下面是我們將在本教程中構建的按鈕的快速瀏覽。

1.左箭頭邊框按鈕

2. 移動線按鈕

3. 拉片按鈕

4.圓形標誌按鈕

5. 發光按鈕

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

5 個 Divi 按鈕模塊設計及其製作方法

1.左箭頭邊框按鈕

首先，創建一個具有一列行的新部分，並向該行添加一個按鈕模塊。

然後將按鈕的默認內容文本更改為“開始使用”（或您實際想要的任何內容）。

現在是時候跳轉到設計設置並更新以下內容：

為按鈕使用自定義樣式：是
按鈕文字顏色：#ffffff
按鈕背景顏色：#324376
邊框寬度：0px
按鈕字母間距：0.2em
按鈕字體：Fira Sans
字體樣式：TT（大寫）、U（下劃線）
下劃線顏色：rgba(255,255,255,0.2)
下劃線樣式：雙
按鈕圖標：見截圖
按鈕圖標顏色：#ff4751
按鈕圖標位置：左

自定義填充：左 40 像素，右 20 像素

盒子陰影：見截圖
框陰影水平位置：22px
框陰影垂直位置：0px
陰影顏色：#ff4751

（40px 的自定義左填充創建了一個固定空間，該空間被框陰影填充以與左箭頭按鈕圖標齊平。）

由於左框陰影與箭頭圖標的開頭齊平，這會創建一個很好的箭頭邊框效果。 如果由於某種原因它沒有與圖標齊平，您可以根據需要調整水平位置。 這種設計的美妙之處在於，即使添加不同數量的按鈕文本，左箭頭邊框也會保持原位。

這是最終結果。

2. 移動線按鈕

下一個按鈕樣式更具技術性和簡約感。 線條是使用框陰影和由透明邊框分隔的背景漸變創建的。 我還添加了一個懸停效果，將框陰影向右移動，從而將底線稍微向右移動以進行微妙的交互。

首先，創建一個具有一列行的新部分，並向該行添加一個按鈕模塊。

將按鈕文本內容更新為您想要的任何內容。 對於此示例，我將保留默認的“單擊此處”。 然後更新設計設置如下：

• 為按鈕使用自定義樣式：是
• 按鈕文字顏色：#3b7986
• 按鈕背景漸變左顏色：rgba(255,255,255,0)
• 按鈕背景漸變右顏色：#3b7986
• 梯度方向：180度
• 起始位置：96%
• 結束位置：0%
• 按鈕邊框寬度：10px
• 按鈕邊框顏色：rgba(0,0,0,0)
• 按鈕邊框半徑：0px
• 按鈕字母間距：6px
• 按鈕字體：Exo 2
• 字體粗細：粗體
• 字體樣式：Tt（小寫）
• 按鈕圖標：右箭頭（見截圖）
• 僅在懸停按鈕上顯示圖標：否
• 自定義填充：0px 底部
• 盒子陰影：見截圖
• 框陰影水平位置：-15px
• 框陰影垂直位置：15px
• 框陰影傳播強度：-13px
• 陰影顏色：#3b7986

您可能還需要在懸停時將背景顏色設置為 #ffffff，因為這是按鈕的默認設置。

這個設計的關鍵是背景顏色漸變和框陰影。 通過將背景顏色漸變起點設置為 96%，這將在按鈕底部創建一條寬度為 4% 的線條。 然後，一旦我們定位並為框陰影著色，我們就有另一個線元素很好地包裹按鈕。 另外，右箭頭圖標也適用於線條設計元素。

這是最終的設計。

要添加移動框陰影的懸停效果，請返回設計設置並將鼠標懸停在“框陰影水平位置”選項上。 您將在文本旁邊看到一個箭頭圖標彈出窗口。 單擊它以打開該特定設置的懸停選項。

然後單擊懸停選項卡並將值更改為 13px。
您將在可視化構建器中看到預覽的懸停效果。

這是懸停效果的樣子：

3. 拉片按鈕

下一個按鈕設計添加了一個框陰影來框住保持在絕對位置的右鍵圖標。 懸停時，按鈕向右延伸，產生您正在拉標籤的效果。

要創建按鈕，首先，創建一個具有一列行的新部分，然後向該行添加一個按鈕模塊。

打開按鈕模塊設置並將內容選項卡下的按鈕文本更新為您想要的任何內容（我將使用文本“了解更多”）。

然後跳轉到設計選項卡並更新以下內容：

為按鈕使用自定義樣式：是
按鈕文字顏色：#ffffff
按鈕背景漸變左側顏色：#7D80DA
按鈕背景漸變右顏色：#8EEDF7
梯度方向：90度
按鈕邊框寬度：0px
按鈕邊框半徑：10px
按鈕字母間距：1px
按鈕字體：Source Sans Pro
字體粗細：粗體
字體樣式：TT
按鈕圖標：見截圖
按鈕圖標顏色：#ffffff
自定義填充：左 1em，右 2.5em
盒子陰影：見截圖
框陰影水平位置：-35px
框陰影垂直位置：0px
陰影顏色：#7d80da

此設計的關鍵是右側的框陰影將框住圖標。 但是現在需要將圖標放置在漸變區域內。 為此，我們需要添加一些自定義 CSS。

轉到“高級”選項卡並在“之後”輸入框中輸入以下 CSS：

position: absolute;
right: 5%;

此 CSS 以圖標的位置為目標，並為其提供距按鈕右邊緣 5% 的絕對位置。

看看到目前為止的設計。

現在要添加懸停效果，我們只需要更新懸停選項卡下的右側填充選項。 為此，請打開按鈕設置並通過將鼠標懸停在自定義填充元素上並單擊彈出的光標圖標來打開懸停選項。 然後選擇懸停選項卡並輸入以下內容：

自定義填充：4em 右

現在讓我們看看最終的結果。

4.圓形標誌按鈕

對於下一個設計，我們將把一個圓形圖標/圖像轉換成一個可點擊的按鈕，帶有一個很酷的懸停效果，顯示一個簡短的號召性用語。

首先，創建一個具有一列行的新部分，並向該行添加一個按鈕模塊。

然後打開按鈕設計設置。 在內容選項卡下，為按鈕文本添加單詞“Go”。

然後轉到設計設置並選擇使用自定義按鈕樣式。 首先添加圓形圖像作為按鈕的背景圖像。 為了使此設計正常工作，請確保您使用的徽標或圖標的 png 圖像是一個完美的圓形，並且圖像尺寸具有相同的高度和寬度。 我使用的圖像是 118px x 118px 的 png。 如果你願意，可以在這裡抓住它：

添加背景圖像後，請確保將背景圖像大小設置為“實際大小”。 這將確保圖像保留其原始尺寸（118 像素 x 118 像素）。

接下來，我們要將按鈕的大小調整為圓形圖像的確切尺寸。 為此，請跳至“高級”選項卡並在“主元素”中輸入以下自定義 CSS：

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

請注意，css 將寬度、高度和行高都設置為相同的 118px 值。 這與我們的圖像的寬度和高度相同。 現在圖像完全適合按鈕。 line-height 設置為 118px，這樣按鈕內的文本將在按鈕內垂直居中（它還沒有完全居中，因為仍然有一些我們需要擺脫的填充將它扔掉）。 並且 text-align: center 確保按鈕內的文本保持居中，即使按鈕模塊左對齊或右對齊。

現在我們需要做的就是完成一些將完成設計的設計設置。 轉到設計選項卡並更新以下內容：

按鈕文字顏色（默認）：rgba(0,0,0,0)
按鈕文本顏色（懸停）：#ffffff

（默認情況下會隱藏按鈕文本並在懸停時以白色顯示）

背景顏色（默認）：#121212
背景顏色（懸停）：#da00f2

（默認情況下，這會在圖像後面顯示黑色背景，然後在懸停時顯示亮粉色背景。）

按鈕邊框寬度：0px
按鈕半徑：50%；

（將按鈕半徑設置為 50% 會將按鈕更改為圓形，因為自定義 css 中按鈕的高度和寬度已設置為 118px。）

按鈕字體： Poppins
字體粗細：粗體
字體樣式：TT
顯示按鈕圖標：否（有一個按鈕圖標會甩掉居中的文本）
自定義填充：0px 頂部，0px 底部

（重要的是去掉頂部和底部填充，以便我們在自定義 css 中設置的行高將使文本垂直居中。）

盒子陰影：見截圖
框陰影垂直位置：0px
陰影顏色（默認）：rgba(0,0,0,0)
陰影顏色（懸停）：rgba(0,0,0,0.68)

（這將在懸停時在圓圈周圍顯示一個輕微的框陰影，以獲得額外的彈出效果。）

這是帶有懸停效果的最終設計。

5. 發光按鈕

最後一個設計非常簡單易行。 所需要的只是創造性地使用背景漸變顏色和框陰影顏色。 懸停效果只是增加了框陰影的大小，以提供更多的發光效果。

首先，創建一個包含一列行的新部分，並向該行添加一個按鈕模塊。 在更新按鈕模塊之前，打開部分設置並為該部分提供深色背景顏色 (#333333)。

現在打開按鈕設置。

您可以保留默認按鈕文本“單擊此處”。 然後更新以下設計設置：

按鈕對齊：居中
為按鈕使用自定義樣式：是
按鈕文字大小：18px
按鈕文字顏色：#ffffff

按鈕背景漸變左側顏色：#00ff8c
按鈕背景漸變右顏色：#15c39a
漸變類型：徑向
徑向：中心
結束位置：75%

（將漸變類型設置為徑向將使漸變為向外擴展的圓形。確保在漸變中間顯示較淺的顏色以創建發光效果。）

按鈕邊框寬度：0px
按鈕邊框半徑：100px
按鈕字母間距（默認）：4px
按鈕字母間距（懸停）：5px

（在懸停時增加字母間距會稍微擴展整個按鈕以獲得不錯的效果）

字體粗細：超粗
字體樣式：I, TT
按鈕圖標：右箭頭（見截圖）
自定義填充：頂部 20 像素，底部 20 像素，左側 30 像素，右側 50 像素

（您需要更多的右填充來說明右箭頭按鈕圖標）

盒子陰影：見截圖
框陰影垂直位置：0px
框陰影模糊強度（默認）：64px
框陰影模糊強度（懸停）：100px
框陰影擴散強度：-12px
陰影顏色：rgba(0,255,140,​​0.66)

（當您將陰影顏色與按鈕的顏色相匹配時，框陰影會增加發光效果。增加懸停時的模糊強度也會放大按鈕的發光效果）

查看帶有懸停效果的最終設計。

更多按鈕靈感

要了解按鈕樣式的靈感，請查看其他一些文章：

• 如何使用 Divi 創建圖標字體按鈕
• 使用動畫滾動按鈕設計獨特的全屏 Divi 佈局
• 如何設計您的 Monarch 社交按鈕以匹配您網站的設計
• 創建不可抗拒的訂閱按鈕的 7 個關鍵

最後的想法

我希望這些示例能激發您以創造性的新方式最大化 Divi 按鈕模塊！ 因為號召性用語對您的網站非常重要，所以在我們的工具箱中擁有各種想法來創建一些獨特的按鈕選項總是好的。 隨意使用這些想法來想出一些您自己的驚人按鈕樣式！

我期待在評論中收到您的來信。

乾杯!