html代码|渐变色按钮代码（html渐变色应用代码）

挺好看的渐变色代码

<!-- CSS样式 -->    
<style>    
/* 容器样式：使按钮居中显示 */    
.button-container {    
display: flex;    
justify-content: center;    
align-items: center;    
height: 10vh; /* 定义容器高度为视口高度的10% */    
}    
/* 按钮样式 */    
.myButton {    
/* 按钮阴影 */    
box-shadow: inset 0px 1px 0px 0px #fff6af;    
/* 按钮背景线性渐变色 */    
background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);    
background-color: #ffec64; /* fallback 背景颜色 */    
border-radius: 6px; /* 圆角 */    
border: 3px solid #00ff00; /* 边框 */    
cursor: pointer; /* 光标样式 */    
color: #333333; /* 文字颜色 */    
font-family: Arial; /* 字体 */    
font-size: 23px; /* 字体大小 */    
font-weight: bold; /* 字体粗细 */    
padding: 12px 50px; /* 内边距 */    
text-decoration: none; /* 文字装饰 */    
text-shadow: 0px 1px 0px #ffee66; /* 文字阴影 */    
animation: blink 1s infinite alternate; /* 按钮闪烁动画 */    
}    
/* 按钮悬停样式 */    
.myButton:hover {    
/* 悬停时背景线性渐变色 */    
background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);    
background-color: #ffab23; /* fallback 背景颜色 */    
}    
/* 按钮闪烁动画 */    
@keyframes blink {    
0% {    
opacity: 1; /* 完全不透明 */    
}    
100% {    
opacity: 0.5; /* 半透明 */    
}    
0% {    
transform: scale(1); /* 初始大小为正常尺寸 */    
}    
50% {    
transform: scale(1.2); /* 放大到1.2倍大小 */    
}    
100% {    
transform: scale(1); /* 缩小回正常尺寸 */    
}    
}    
</style>    
<!-- HTML结构 -->    
<div class="button-container">    
<!-- 按钮链接 -->    
<a href="https://www.liangshengfaka.cn/faka/weixin.html" class="myButton" target="_blank">进入卡网</a>    
</div>