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 From: https://www.cnblogs.com/amboke/p/16656639.html