颜色渐变按钮

<a href="网址链接" class="text-center gradient-button btn-block" style="color:#FFF">颜色渐变按钮</a>

<!-------------文本渐变色---------------->
<style>
.gradient-button {
background-image: linear-gradient(to right, #ff7f00, #ffcc00);
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
font-size: 22px;
}
</style>
<!-------------文本渐变色---------------->

<a href="网址链接" class="text-center gradient-button-YY btn-block" style="color:#FFF">颜色渐变按钮</a>

<!-------------按钮渐变色---------------->
<style>
.gradient-button-YY {
background-image: linear-gradient(to right, #43CBFF, #9708CC);
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
font-size: 22px;
box-shadow: none; /* 初始状态下无阴影 */
transition: box-shadow 0.5s ease; /* 添加过渡效果 */
}
.gradient-button-YY:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 鼠标悬停时显示阴影 */
}
</style>
<!-------------按钮渐变色---------------->