提交按钮的高级样式技术
Posted: Sat Feb 01, 2025 5:00 am
WPForms 不需要您使用任何代码来设置按钮的基本样式。但是，您需要使用简单的 CSS 来实现渐变色等高级效果。
这比听起来容易得多。首先，您需要在您的网站上安装WPCode 插件，这将允许您轻松插入代码片段来更改您的提交按钮样式。
安装 WPCode
打开您的 WordPress 仪表板并转到插件»添加新插件。
添加新插件
在“添加插件”屏幕上，使用搜索框搜索 WPCode。然后，按“立即安装”按钮将插件添加到您的网站。
安装 WPCode
安装完成后，“立即安装”按钮将变为“激活”。按下“激活”按钮，您就可以使用 WPCode 将代码片段添加到您的网站了。
之后，将光标悬停在 WordPress 仪表板侧面板上的代码片段上，然后在菜单展开时单击+ 添加片段。
+ 添加代码片段
然后，单击“添加自定义代码（新代码片段）”下的“使用代码片段”
WPCode 添加新代码片段
然后您需要选择代码片段类型。为了调整样式，您将添加 CSS 自定义代码片段。因此请继续从可用选项中选择CSS 代码片段。
CSS 代码片段
现在，您只需在代码编辑器窗口中复制并粘贴代码片段，即可将样式更改应用于表单。我将分享一些可用于更改提交按钮样式的常见 CSS 代码示例。
为提交按钮添加渐变颜色
颜色渐变非常引人注目，通常表示表单设计非常专业。当您想通过按钮的渐 兼职数据 变色传达您的专业性和对细节的关注时，这非常有用。
以下是可用于为提交按钮颜色添加线性渐变的代码片段：
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
}
提交按钮渐变
在此代码中，“#wpforms-8” 指的是您的特定表单的表单 ID。我正在编辑的表单的 ID 为 8。如果您的表单 ID 不同，比如说 17，您可以在此代码中添加正确的数字（即“#wpforms-17”）。
您可以通过查看特定表单的短代码中提到的数字来找到表单的表单 ID。这在“表单概览”屏幕中表单的“短代码”列中提到。
WPForms 表单 ID
此代码的第二个可自定义部分是 linear-gradient 的值。括号内用逗号分隔的三个值分别是：
渐变角度
第一个颜色的十六进制代码
第二种颜色的十六进制代码
您可以根据需要更改这些值。如果您需要找到所需颜色的精确十六进制代码，可以使用此HTML 颜色生成器。
创建完自定义 CSS 代码片段后，单击“保存代码片段”按钮和旁边的切换按钮以保存并打开该代码片段。
这比听起来容易得多。首先，您需要在您的网站上安装WPCode 插件，这将允许您轻松插入代码片段来更改您的提交按钮样式。
安装 WPCode
打开您的 WordPress 仪表板并转到插件»添加新插件。
添加新插件
在“添加插件”屏幕上，使用搜索框搜索 WPCode。然后，按“立即安装”按钮将插件添加到您的网站。
安装 WPCode
安装完成后，“立即安装”按钮将变为“激活”。按下“激活”按钮，您就可以使用 WPCode 将代码片段添加到您的网站了。
之后，将光标悬停在 WordPress 仪表板侧面板上的代码片段上，然后在菜单展开时单击+ 添加片段。
+ 添加代码片段
然后，单击“添加自定义代码（新代码片段）”下的“使用代码片段”
WPCode 添加新代码片段
然后您需要选择代码片段类型。为了调整样式，您将添加 CSS 自定义代码片段。因此请继续从可用选项中选择CSS 代码片段。
CSS 代码片段
现在，您只需在代码编辑器窗口中复制并粘贴代码片段，即可将样式更改应用于表单。我将分享一些可用于更改提交按钮样式的常见 CSS 代码示例。
为提交按钮添加渐变颜色
颜色渐变非常引人注目，通常表示表单设计非常专业。当您想通过按钮的渐 兼职数据 变色传达您的专业性和对细节的关注时，这非常有用。
以下是可用于为提交按钮颜色添加线性渐变的代码片段：
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
}
提交按钮渐变
在此代码中，“#wpforms-8” 指的是您的特定表单的表单 ID。我正在编辑的表单的 ID 为 8。如果您的表单 ID 不同，比如说 17，您可以在此代码中添加正确的数字（即“#wpforms-17”）。
您可以通过查看特定表单的短代码中提到的数字来找到表单的表单 ID。这在“表单概览”屏幕中表单的“短代码”列中提到。
WPForms 表单 ID
此代码的第二个可自定义部分是 linear-gradient 的值。括号内用逗号分隔的三个值分别是：
渐变角度
第一个颜色的十六进制代码
第二种颜色的十六进制代码
您可以根据需要更改这些值。如果您需要找到所需颜色的精确十六进制代码，可以使用此HTML 颜色生成器。
创建完自定义 CSS 代码片段后，单击“保存代码片段”按钮和旁边的切换按钮以保存并打开该代码片段。