CSS Glassmorphism 按钮悬停效果
作者：互联网
CSS Glassmorphism 按钮悬停效果
CSS Glassmorphism 按钮悬停效果免费下载 在 HTML 和 CSS 中
HTML：
<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>Glassmorphism 按钮</title>
</head> <body>
<div class="container">
<div class="btn"><a href="#">阅读更多 1</a></div>
<div class="btn"><a href="#" >阅读更多 2</a></div>
<div class="btn"><a href="#" >阅读更多 3</a></div> </div>
</body>
您还可以下载： HTML 和 CSS 中的 CSS 选项卡
CSS：
@import url("https://fonts.googleapis.com/css2?family=Poppins:[[email protected]](/cdn-cgi/l/email-protection);500;600;700;800;900&family=Roboto:[[email protected]](/cdn-cgi/l/email-protection);500;700&display=swap"); * {
边距：0；
填充：0；
box-sizing：边框框；
字体家族：“机器人”，无衬线；
}
身体 {
位置：相对；
显示：弯曲；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
背景：线性渐变（到底部，#5d326c，#350048）； /*小花*/
}
。容器 {
宽度：1000px；
显示：弯曲；
弹性包装：换行；
justify-content：空间环绕；
}
.container .btn {
位置：相对；
顶部：0；
左：0；
宽度：250px；
高度：50px；
边距：0；
显示：弯曲；
证明内容：中心；
对齐项目：居中；
}
.container .btn 一个 {
位置：绝对；
顶部：0；
左：0；
宽度：100%；
高度：100%；
显示：弯曲；
证明内容：中心；
对齐项目：居中；
背景：rgba(255, 255, 255, 0.05);
盒子阴影：0 15px 15px rgba(0, 0, 0, 0.3);
边框底部：1px 实心 rgba(255, 255, 255, 0.1);
边框顶部：1px 实心 rgba(255, 255, 255, 0.1);
边框半径：30px；
填充：10px；
字母间距：1px；
文字装饰：无；
溢出：隐藏；
颜色：#fff;
字体粗细：400px；
z-index：1；
过渡：0.5s；
背景过滤器：模糊（15px）；
}
.container .btn：悬停在 {
字母间距：3px；
}
.container .btn a::before {
内容： ””;
位置：绝对；
顶部：0；
左：0；
宽度：50%；
高度：100%；
背景：线性渐变（向左，rgba(255, 255, 255, 0.15)，透明）；
变换：skewX(45deg) translate(0);
过渡：0.5s；
过滤器：模糊（0px）；
}
.container .btn:hover a::before {
变换：skewX(45deg) translate(200px);
}
.container .btn::before {
内容： ””;
位置：绝对；
左：50%；
变换：翻译（-50%）；
底部：-5px；
宽度：30px；
高度：10px；
背景：#f00；
边框半径：10px；
过渡：0.5s；
过渡延迟：0.5；
}
.container .btn:hover::before /*点亮按钮*/ {
底部：0；
高度：50%；
宽度：80%；
边框半径：30px；
} .container .btn::after {
内容： ””;
位置：绝对；
左：50%；
变换：翻译（-50%）；
顶部：-5px；
宽度：30px；
高度：10px；
背景：#f00；
边框半径：10px；
过渡：0.5s；
过渡延迟：0.5；
}
.container .btn:hover::after /*点亮按钮*/ {
顶部：0；
高度：50%；
宽度：80%；
边框半径：30px；
}
.container .btn:nth-child(1)::before, /*chnage 1*/
.container .btn:nth-child(1)::after {
背景：#ff1f71；
盒子阴影：0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71,
0 0 60px #ff1f71;
}
.container .btn:nth-child(2)::before, /* 2*/
.container .btn:nth-child(2)::after {
背景：#2db2ff；
盒子阴影：0 0 5px #2db2ff，0 0 15px #2db2ff，0 0 30px #2db2ff，
0 0 60px #2db2ff;
}
.container .btn:nth-child(3)::before, /* 3*/
.container .btn:nth-child(3)::after {
背景：#1eff45；
盒子阴影：0 0 5px #1eff45, 0 0 15px #1eff45, 0 0 30px #1eff45,
0 0 60px #1eff45;
}
HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com
完毕！享受 CSS Glassmorphism 按钮悬停效果片段
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/14326/12590500
标签：container,Glassmorphism,before,悬停,btn,30px,CSS,255 来源： https://www.cnblogs.com/amboke/p/16656639.html