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

已發表: 2019-03-11

今天學習如何創建 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 可視化編輯器編輯小部件.

最大按鈕添加到帖子

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

mb按鈕添加

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

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

最大按鈕添加到帖子選擇mb選項

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

最大按鈕添加到帖子選擇mb選項帖子

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 網站創建新聞通訊/訂閱小部件。