如何在不编码的情况下创建漂亮的 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 网站创建新闻通讯/订阅小部件。