CSS Glassmorphism 按钮悬停效果

2022-09-05 00:33:07 阅读：219 来源： 互联网

标签：container Glassmorphism before 悬停 btn 30px CSS 255

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 按钮悬停效果片段

现在下载

本文链接：https://www.qanswer.top/14326/12590500

标签：container,Glassmorphism,before,悬停,btn,30px,CSS,255
来源： https://www.cnblogs.com/amboke/p/16656639.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS Glassmorphism 按钮悬停效果

CSS Glassmorphism 按钮悬停效果

HTML：

CSS：