当前位置：首页 > wzjs >正文

东莞网站优化方法做网站建站点

wzjs 2025/9/22 23:13:55

东莞网站优化方法,做网站建站点,个人域名备案网站内容怎么写,dw做网站如何设置转动【css酷炫效果】纯css实现液体按钮效果缘创作背景html结构css样式完整代码基础版进阶版（动态边框） 效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490497 缘创作随缘，不…

【css酷炫效果】纯css实现液体按钮效果

缘
创作背景
html结构
css样式
完整代码
- 基础版
- 进阶版（动态边框）
效果图

想直接拿走的老板，链接放在这里：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>