当前位置: 首页> 娱乐> 影视 > html+css 实现hover 凹陷按钮

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);
}

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕


整理不易,点赞关注宝码香车

更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作

关键字:html+css 实现hover 凹陷按钮

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: