想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490497
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
<button class="liquid-btn-1">Hover Me</button>
css样式
.liquid-btn-1 {
padding: 15px 30px;
font-size: 1.2rem;
background: #2196f3;
color: white;
border: none;
border-radius: 50px;
position: relative;
overflow: hidden;
transition: 0.8s;
cursor: pointer;
}
.liquid-btn-1:hover {
background: #1565c0;
box-shadow: 0 0 20px rgba(33,150,243,0.5);
}
.liquid-btn-1::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
transition: 0.8s;
}
.liquid-btn-1:hover::before {
left: 100%;
}
完整代码
基础版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Liquid Button</title>
<style>
.liquid-btn-1 {
padding: 15px 30px;
font-size: 1.2rem;
background: #2196f3;
color: white;
border: none;
border-radius: 50px;
position: relative;
overflow: hidden;
transition: 0.8s;
cursor: pointer;
}
.liquid-btn-1:hover {
background: #1565c0;
box-shadow: 0 0 20px rgba(33,150,243,0.5);
}
.liquid-btn-1::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
transition: 0.8s;
}
.liquid-btn-1:hover::before {
left: 100%;
}
</style>
</head>
<body>
<div class="liquid-button">
<button class="liquid-btn-1">Hover Me</button>
</div>
</body>
</html>
进阶版（动态边框）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Liquid Button</title>
<style>
.liquid-btn-3 {
padding: 18px 36px;
font-size: 1.3rem;
background: linear-gradient(90deg, #4caf50, #8bc34a, #4caf50);
background-size: 200%;
color: white;
border: 2px solid transparent;
border-radius: 8px;
position: relative;
transition: 0.5s;
animation: bgFlow 3s linear infinite;
}
.liquid-btn-3::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(90deg,
#4caf50, #fff, #8bc34a, #fff, #4caf50);
background-size: 400%;
z-index: -1;
border-radius: 8px;
animation: borderFlow 4s linear infinite;
}
@keyframes bgFlow {
0% { background-position: 0% }
100% { background-position: 200% }
}
@keyframes borderFlow {
0% { background-position: 0% }
100% { background-position: 400% }
}
</style>
</head>
<body>
<div class="liquid-button">
<button class="liquid-btn-3">动态边框液体按钮</button>
</div>
</body>
</html>
效果图
