其他分享
首页 > 其他分享> > CSS Glassmorphism 按钮悬停效果

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