如何在不編碼的情況下創建漂亮的 CSS3 按鈕

今天學習如何創建 CSS3 按鈕，因為 - 按鈕不僅僅是網站上的彩色框； 它們可能是任何網站中最重要的元素，因為它會吸引註意力並促使訪問者做一些事情：註冊並登錄您的網​​站、分享、提交或編輯帖子、購買您的產品、保存等等。

從頭開始創建按鈕，特別是考慮到跨瀏覽器功能 - 不是小菜一碟。 熟悉 HTML、CSS 的人知道創建漂亮的 CSS3 按鈕是多麼頑固，多虧了 WordPress CMS 和 MaxButtons WordPress 插件，您將在您的網站上展示一些最漂亮的按鈕。

使用 MaxButtons，我們可以創建 CSS3 按鈕，而無需接觸任何一行代碼。

我們將從 WordPress 網站管理區域安裝插件開始。 如果您想下載文件，請從作者的 WordPress 插件頁面下載。

什麼是最大按鈕？

Maxbuttons 是一個很棒的 WordPress 插件，它可以輕鬆創建令人驚嘆的 CSS3 按鈕，您可以將這些按鈕添加到您的 WordPress 網站上的頁面、帖子甚至小部件中，而無需觸及任何一行代碼，當然，我必須添加 - 除非如果你想。

有了它，您可以創建適合多種用途的 CSS3 號召性用語按鈕，例如社交分享按鈕、立即購買、聯繫我們等等。

插件的主要特點

• 易於使用，無需編碼技能即可使用。
• 可以放置在內容中任何位置的按鈕短代碼——頁面、帖子甚至小部件。
• 創建無限數量的 CSS3 按鈕。
• 適用於所有現代瀏覽器，同時與其他瀏覽器兼容。
• 可重複使用的按鈕，作為創建其他按鈕的基礎。
• 完全符合 CSS3 與文本陰影、框陰影、漸變等。
• 用於無限顏色組合的顏色選擇器。
• 在不同的顏色背景上查看您的按鈕。
• 在許多其他人中。

創建 CSS3 按鈕

1.從左側的管理菜單中，單擊 MaxButtons，然後單擊 Add New

2.或者您可以單擊按鈕，然後從按鈕儀表板添加新的。 在創建第一個按鈕之前，您將擁有 3 個按鈕，您可以單擊以創建新的 CSS3 按鈕。 單擊添加新的。

3.在下一個屏幕上，使用編輯器，根據自己的喜好創建和自定義 CSS3 按鈕。

自定義按鈕的選項非常多，可能看起來讓人不知所措，但實際上並非如此。 您可以從默認按鈕設置開始，只需更改目標 URL、按鈕名稱和文本。

但是，當您進行實驗時，您可以預覽您正在做的事情並繼續根據自己的喜好進行調整。

按鈕預覽區域位於插件頁面的右上角。 您可以通過單擊箭頭鍵來切換以查看或隱藏它。

4. 完成後確保單擊“保存”。

在內容中插入 CSS3 按鈕

1.複製您在上面創建的按鈕的按鈕簡碼

2.將此簡碼粘貼到您的頁面、帖子或小部件的任何位置，按鈕應出現在那裡。

3.Maxbuttons 帶有一個額外的強大功能。

能夠重複使用您創建的 CSS3 按鈕，而無需經歷相同的過程。

這是一致性很重要的網站的典型特徵。

有兩種重用 CSS3 按鈕的方法

1.首先，當您使用可視化編輯器創建帖子或頁面時 - 單擊 MB。

我想向小部件添加一個按鈕，並且喜歡像我們現在使用的那樣使用可視化編輯器，那麼您將需要使用可視化編輯器小部件，您可以從我們的初學者指南中了解更多信息：在 WordPress 中使用 WYSIWYG 可視化編輯器編輯小部件.

在彈出表單上單擊要添加到內容的按鈕。

為您的按鈕設置您想要的所有選項，定義新的文本、某人單擊按鈕時將被重定向到的頁面鏈接等等。

完成定義選項後，單擊，將按鈕插入編輯器。

這是我們的內容編輯器在添加了短代碼後的樣子。 第二個短代碼是我們在最後一步中添加的。

2.使用簡碼添加按鈕的另一種方法是將參數傳遞給簡碼。

以下是您可以用來創建帶有設計的 css3 按鈕的參數。

• 使用按鈕名稱添加按鈕[maxbutton name=”Contact Us”]
• 具有不同鏈接的相同按鈕[maxbutton id=”1″ url=”http://yoururl”]
• 具有不同文本的相同按鈕[maxbutton id=”1″ text=”yourtext”]
• 所有可能的短代碼選項[maxbutton id=”1″ text=”yourtext” url=”http://yoururl” linktitle=”tooltip” window=”new” nofollow=”true”]

讓我們遮蔽光線並理解這些參數

Maxbutton id - 這是您使用 Maxbutton 創建 css3 按鈕時分配的唯一 id。

文本- 是顯示在按鈕上的文本。

URL – 是用戶單擊按鈕時將被重定向到的頁面或網站的鏈接。

鏈接標題- 當有人將鼠標懸停在按鈕上時，會顯示一個工具提示，您可以在此處設置文本。

窗口- 默認情況下，一個按鈕將在當前窗口上打開目標頁面。 當您將 window="new" 參數傳遞給您的簡碼時，一旦單擊按鈕，URL 將在新窗口中打開。

請記住，將參數傳遞給短代碼將覆蓋您在創建 CSS3 按鈕時所做的默認設置。

完成後，我們的內容應該顯示按鈕。

使用 Maxbutton WordPress 插件，您無需任何技術編碼知識即可創建漂亮的 CSS3 按鈕，這些按鈕足以滿足您需要添加到內容中的任何號召性用語。

如果您喜歡基本插件可以為您做的事情，那麼您可以考慮使用插件來做更多的插件。

如果您正在購買要使用的插件，那麼考慮其他插件是謹慎的做法。 這裡還有幾個插件。

1. 按鈕簡碼和小部件
2. 忘記簡碼按鈕- 是的，它就是在您的頁面內創建 CSS3 按鈕或在沒有簡碼的情況下發布。

希望這可以幫助您輕鬆創建 CSS3 按鈕，您可能還想學習如何為您的 WordPress 網站創建新聞通訊/訂閱小部件。