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