前言:哈喽,大家好,今天给大家分享html+css 绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕
目录
- 📚一、效果
- 📚二、原理解析
- 💡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())操作