如何添加类似WP Beaver Builder的橙色样式CSS按钮？

别担心！不用依赖特定主题也能轻松实现这个按钮样式，我来一步步教你怎么做：

首先先拆解目标按钮的核心视觉特征（我观察到的）：

• 高饱和度的橙色主背景，hover时颜色加深
• 圆角边框设计
• 加粗的白色文字
• 适中的内边距保证按钮大小协调
• hover时带有阴影和轻微上移动画
• 无下划线的链接样式（如果是按钮链接）

第一步：编写通用CSS代码 #

你可以把这段代码加到网站的自定义CSS区域（比如主题设置里的「自定义CSS」面板，或者通过代码插件添加，也可以直接写入你的样式文件）：

/* 基础按钮样式 */
.beaver-style-btn {
  background-color: #ff7a00; /* Beaver Builder的标志性橙色，可按需修改 */
  color: #ffffff;
  font-weight: 700;
  padding: 12px 24px; /* 控制按钮的宽高比例，可调整 */
  border-radius: 4px; /* 圆角大小，可按需修改 */
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease; /* 实现平滑的hover过渡效果 */
  border: none; /* 去掉浏览器默认边框 */
  cursor: pointer;
  font-size: 16px; /* 字体大小，可适配你的网站排版 */
}

/* 鼠标悬浮状态 */
.beaver-style-btn:hover {
  background-color: #e66a00; /* 悬浮时颜色加深，增强交互感 */
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3); /* 悬浮时添加柔和阴影 */
  transform: translateY(-2px); /* 轻微上移动画，可选 */
}

/* 按钮点击状态 */
.beaver-style-btn:active {
  transform: translateY(0); /* 点击后回到原位，还原视觉状态 */
}

第二步：添加HTML按钮/链接 #

根据你的需求，在需要放置按钮的位置插入对应的HTML代码：

• 如果是普通功能按钮（比如表单提交按钮）：

<button class="beaver-style-btn">Get It Now</button>

• 如果是跳转链接按钮：

<a href="你的目标链接地址" class="beaver-style-btn">Get It Now</a>

第三步：适配你的网站 #

1. 大多数主题都自带自定义CSS入口，直接把CSS代码粘贴进去即可生效
2. 如果没有自定义CSS功能，你可以用<style>标签包裹CSS代码，放到网站的<head>区域：

<style>
/* 粘贴上面的CSS代码 */
</style>

3. 把HTML代码放到你想要显示按钮的位置，比如文章内容、侧边栏、页眉页脚等区域

小技巧 #

• 可以根据网站风格调整颜色值、内边距、字体大小等参数
• 如果按钮放在深色背景上，建议调整文字颜色或添加浅色边框，保证可读性
• 测试不同设备的显示效果，确保按钮在移动端也能正常展示

内容的提问来源于stack exchange，提问作者Prime01