如何使用自定义代码为按钮文本添加阴影

GemPages 中的按钮文字阴影

此 按钮元素内的文本 可以使用 CSS 进行自定义。通过添加一个 文字阴影 效果是，您可以：

• 在背景杂乱的情况下，使按钮文字更加醒目。
• 打造更现代或更高端的设计外观
• 改进行动号召按钮的视觉层级结构
• 重点突出重要行动，例如 立即购买, 添加到购物车 或 立即开启合作

此方法适用于 GemPages 中的按钮元素 你想在不改变按钮布局的情况下，通过视觉方式增强文本效果。

逐步教程：如何为按钮文本添加阴影

请仔细按照以下步骤为按钮文字添加阴影效果。

步骤 1：在 GemPages 编辑器中打开您的页面

从你的 GemPages 仪表板打开包含要编辑的按钮的页面。

找到 按钮元素 包含你想添加阴影的文本。

步骤 2：打开自定义代码面板

直接右键单击 按钮元素 包含文本的部分。

然后：

• 从我们的数据库中通过 UL Prospector 平台选择 自定义代码

• 此 CSS面板 会出现

此面板允许您专门为该按钮添加自定义样式。

步骤 3：复制元素类

当 CSS 面板打开时，您会看到一个 元素类 在第一行。

它看起来像这样：

.gp-button-abc123

复制这个类名——下一步你会用到它。

步骤 4：粘贴文本阴影代码

将以下自定义 CSS 添加到面板中：

然后：

• 更换 元素类 使用您的实际按钮类
• 点击 已保存

例如，如果你的元素类是： .gp-button-abc123

最终的代码应该如下所示：

.gp-button-abc123 {

 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;

}

应用后，按钮文字将显示柔和的阴影效果。

了解文本阴影值

此 文字阴影 该属性包含四个值。每个值控制阴影的外观。

文字阴影：2px 2px 4px rgba(0, 0, 0, 0.3);

以下是每个数值的含义：

2px → 水平偏移

控制阴影移动的距离 向左或向右.

例子：

2px → 将阴影向右移动

-2px → 将阴影向左移动

2px → 垂直偏移

控制阴影移动的距离 上或下.

例子：

2px → 阴影向下移动

-2px → 将阴影向上移动

4px → 模糊半径

控制阴影的柔和程度或锐利程度。

例子：

0px → 锐利阴影

4px → 柔和阴影

10px → 非常柔和的阴影

数值越高，阴影越柔和。

rgba(0, 0, 0, 0.3) → 阴影颜色

控制阴影的颜色和透明度。

格式：

rgba(红色, 绿色, 蓝色, 不透明度)

计费示例：

RGBA（0，0，0，0.3）

宗旨：

• 红色：0
• 绿色：0
• 蓝色：0
• 不透明度：0.3（30%可见）

这创造了一个 半透明黑色阴影.

如果您想创建自定义阴影颜色，这些工具可以帮助您轻松生成 RGBA 值。

• https://rgbacolorpicker.com
• https://cssgradient.io
• https://www.w3schools.com/colors/colors_picker.asp
• https://htmlcolorcodes.com

这些工具允许您：

• 视觉上选择任何颜色
• 调整透明度（不透明度）
• 复制 rgba(…) 直接价值
• 使用前预览阴影颜色