在WordPress文章中添加一个好看的跳转按键

效果图：

教程

HTML 部分：

<div class="center-button">
<a href="https://hualog.com/" class="custom-button">
<span>访问花的博客</span>
</a>
</div>

CSS 部分：

/* 居中容器 */
.center-button {
text-align: center; /* 让按钮居中 */
margin-top: 50px; /* 距离顶部的间距 */
}

/* 按钮样式 */
.custom-button {
display: inline-block; /* 使链接元素成为块级元素 */
background-color: #007bff; /* 按钮背景色（蓝色） */
color: #fff; /* 按钮文字颜色 */
font-size: 18px; /* 按钮文字大小 */
font-weight: bold; /* 字体加粗 */
text-align: center; /* 文本居中 */
text-decoration: none; /* 移除默认的下划线 */
border-radius: 30px; /* 按钮圆角 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 按钮阴影效果 */
transition: all 0.3s ease; /* 平滑过渡 */
position: relative;
overflow: hidden;
animation: pulse 2s infinite; /* 呼吸效果 */
padding: 10px 30px; /* 按钮内边距，根据需要调整 */
}

/* 鼠标悬停时的效果 */
.custom-button:hover {
background-color: #0056b3; /* 鼠标悬停时变为深蓝色 */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 鼠标悬停时增加阴影效果 */
transform: translateY(-3px); /* 鼠标悬停时微微上移 */
}

/* 七彩文字效果 */
.custom-button span {
font-weight: bold;
background-image: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #00ff00, #0000ff, #800080, #ff00ff); /* 设置彩虹色的渐变 */
background-size: 400% 400%; /* 扩展渐变的范围 */
-webkit-background-clip: text; /* 背景渐变应用到文字 */
color: transparent; /* 文字颜色透明 */
animation: rainbow 3s linear infinite; /* 设置动画使文字颜色循环变化 */
}

/* 彩虹文字颜色的动画 */
@keyframes rainbow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

/* 呼吸效果 */
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.8;
}
}

/* 适应移动端设备 */
@media (max-width: 768px) {
.custom-button {
font-size: 16px; /* 字体稍微小一点 */
}
}

关键点：

1. 背景渐变应用到文字：
   使用了 background-image: linear-gradient() 设定了七种彩虹颜色（红色、橙色、黄色、绿色、蓝色、紫色和粉色）来作为渐变颜色。
   使用 background-size: 400% 400% 扩展渐变范围，并让它有足够的空间进行流动。
2. -webkit-background-clip: text;：
   这行代码将背景渐变只应用到文字上，使得背景渐变像彩虹一样显示在文字上。
3. @keyframes rainbow 动画：
   通过调整背景渐变的 位置，实现文字颜色的循环变化。背景从 0% 到 100% 再回到 0%，创造出彩虹色流动的效果。
   动画持续时间设定为 3s，并且使用 linear 保证颜色变化的平滑流动，infinite 使得动画持续不断。
4. 呼吸效果：
   使用 @keyframes pulse 给按钮添加轻微的放大和缩小效果，产生呼吸感。

步骤：

• 将 HTML 代码粘贴到你的页面或文章中。
• 将 CSS 代码粘贴到 外观 -> 自定义 -> 附加CSS 中。

这样，你就能看到一个持续变换颜色的彩虹效果文字。如果你还是没有看到效果，可能是因为浏览器或设置问题，确保你使用的浏览器支持 -webkit-background-clip 和渐变动画。