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

CSS Glassmorphism 按钮悬停效果

时间:2022-09-05 00:23:03浏览次数:100  
标签: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 按钮悬停效果片段

现在下载

版权声明:本文为博主原创文章,遵循 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

相关文章

  • HTML、CSS 和 JavaScript 格式的 3D 玻璃天气图标
    HTML、CSS和JavaScript格式的3D玻璃天气图标3D玻璃天气图标免费下载****在HTML、CSS和JavaScript中HTML:<divclass="weatherweather--sun"><divclass......
  • Web 中的可访问性 (CSS)
    PhotobyKOBU代理商on不飞溅Web中的可访问性(CSS)这是我关于Web上的可访问性的第二篇文章。在里面上一篇文章,我在HTML中谈到了Web上的可访问性,而这一次,......
  • CSS JS 规范+数据类型
    1、CSSJS规范+数据类型window.onload=function(){​//varstr='abc';​//varnum=123;​//varbool=true;​//varund=undefined;......
  • 使用CSS3快速实现毛玻璃效果
    使用CSS3实现毛玻璃效果并没有想象中那么难,我们只需要了解一个属性:backdrop-filter:blur(5px);在使用该属性之前我们先要区分backdrop-filter与filter的区别。filter......
  • 简单的Css动画---攀爬效果
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"c......
  • CSS常用属性
    ​ /**作者:呆萌老师*☑csdn认证讲师*☑51cto高级讲师*☑腾讯课堂认证讲师*☑网易云课堂认证讲师*☑华为开发者学堂认证讲师*☑爱奇艺千人名师计划成员*在这里......
  • 前端学习之------浏览器兼容(CSS)
    浏览器兼容指的是:由于各浏览器使用了不同的内核,使得网页在各种浏览器上的显示效果不一致,做好浏览器兼容,才能够让网站在不同浏览器上正常显示CSS方面:1、不同浏览器的标签......
  • DOM css js 执行顺序
    DOM、CSS、JS的执行顺序js放在head中会立即执行,会阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。2.js的执行依赖前......
  • CSS Glassmorphism 按钮悬停效果
    CSSGlassmorphism按钮悬停效果CSSGlassmorphism按钮悬停效果免费下载在HTML和CSS中HTML:<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compat......
  • HTML、CSS 和 JavaScript 格式的 3D 玻璃天气图标
    HTML、CSS和JavaScript格式的3D玻璃天气图标3D玻璃天气图标免费下载****在HTML、CSS和JavaScript中HTML:<divclass="weatherweather--sun"><divclass......