html代码|渐变色按钮代码(html渐变色应用代码)
时间:2024-04-17 20:50:29 阅读:1726
挺好看的渐变色代码
Markup
<!-- 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>
复制成功!
网友评论