html+css 实现hover 凹陷按钮

时间:2025/7/8 22:47:42来源：https://blog.csdn.net/qq_33650655/article/details/141354833 浏览次数:0次

前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
csdngif标识

📚一、效果
📚二、原理解析
- 💡1.这是一个，hover时凹陷的效果。每个按钮是一个button元素标签，如下图。
- 💡2.当按钮上有鼠标时，hover效果触发，添加`内阴影和外阴影`效果。
- 💡3.具体的变换参数，直接==看代码==，可以一键复制，查看效果
📚三、上代码，可以直接复制使用
- 🗂️目录
- ✍️html
- ✍️css

📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋

📚一、效果

📚二、原理解析

💡1.这是一个，hover时凹陷的效果。每个按钮是一个button元素标签，如下图。

💡2.当按钮上有鼠标时，hover效果触发，添加`内阴影和外阴影`效果。

.btn-2:hover {box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116, 125, 136, .5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}

💡3.具体的变换参数，直接看代码，可以一键复制，查看效果

📚三、上代码，可以直接复制使用

🗂️目录

✍️html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html+css 实现hover 凹陷按钮</title><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container"><h1 style="text-align: center;color:#fff;margin-bottom: 20px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">html+css 实现hover 凹陷按钮</h1><div class="wrapper"><button class="custom-btn btn-2">求点赞</button><button class="custom-btn btn-2">求关注</button><button class="custom-btn btn-2">求收藏</button><button class="custom-btn btn-2">求转发</button></div>
</div></body>
</html>

✍️css

* {margin: 0;padding: 0;box-sizing: border-box;
}:root {--btn-bg-color: #fff;--font-color-black: #000;--btn-bg-color-hover: #FF5833;
}.container {min-height: 100vh;/*background-color: #0e1538;*/background-color: #E0E5EC;
}.wrapper {margin-top: 30px;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 40px;
}/*按钮*/
.custom-btn {width: 130px;height: 40px;color: #fff;border-radius: 5px;padding: 10px 25px;font-family: 'Lato', sans-serif;font-weight: 500;background: transparent;cursor: pointer;transition: all 0.3s ease;position: relative;display: inline-block;box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),7px 7px 20px 0px rgba(0,0,0,.1),4px 4px 5px 0px rgba(0,0,0,.1);outline: none;
}.btn-2 {background: rgb(96,9,240);background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);border: none;}.btn-2:before {height: 0%;width: 2px;
}/*当hover时*/
.btn-2:hover {box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116, 125, 136, .5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}