这是一款色彩优美的渐变按钮，共五个，五个颜色不一样。默认情况下，颜色是从左边渐变到右边，当鼠标悬停到按钮上时，按钮会以动画过度的方式反相渐变，也就是从右边渐变到左边，看起来非常优美。
五个色彩优美的鼠标悬停渐变按钮
查看效果：五个色彩优美的鼠标悬停渐变按钮演示
制作过程
1、HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>五个色彩优美的鼠标悬停渐变按钮演示_dowebok</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="dowebok">
<a class="btn btn-1" href="javascript:">网站首页</a>
<a class="btn btn-2" href="javascript:">产品中心</a>
<a class="btn btn-3" href="javascript:">下载中心</a>
<a class="btn btn-4" href="javascript:">联系我们</a>
<a class="btn btn-5" href="javascript:">关于我们</a>
</div>
</body>
</html>
2、CSS
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.dowebok {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 80vw;
margin: 200px auto;
}
.dowebok .btn {
flex: 1 1 auto;
margin: 10px;
padding: 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background: linear-gradient(
90deg,
var(--c1, #f6d365),
var(--c2, #fda085) 51%,
var(--c1, #f6d365)
)
var(--x, 0) / 200%;
color: white;
text-shadow: 0 0 5px #666;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
}
.dowebok .btn:hover {
--x: 100%;
}
.dowebok .btn-1 {
--c1: #f6d365;
--c2: #fda085;
}
.dowebok .btn-2 {
--c1: #fbc2eb;
--c2: #a6c1ee;
}
.dowebok .btn-3 {
--c1: #84fab0;
--c2: #8fd3f4;
}
.dowebok .btn-4 {
--c1: #a1c4fd;
--c2: #c2e9fb;
}
.dowebok .btn-5 {
--c1: #ffecd2;
--c2: #fcb69f;
}
到这里就制作完了，如需下载完整代码，请前往：五个色彩优美的鼠标悬停渐变按钮
网友评论