css实现拟态按钮

拟态按钮 dome

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>新拟态按钮</title><body><div>拟态按钮</div>
</body>
<style>
body {display: grid;height: 100vh;place-items: center;
}:root {--color-background: #ebecf0;--color-icon-bg: #ebecf0;--color-label: slategrey;--color-light: rgba(121, 130, 160, .55);--color-shadow: rgb(255, 255, 255);--duration-ani: 50ms;
}div {display: flex;justify-content: center;align-items: center;/*一个合适的圆角*/border-radius: 20px;width: 100px;height: 100px;/*颜色和背景颜色相近，低对比度*/background-color: var(--color-icon-bg);/*模拟光照阴影*/box-shadow: 5px 5px 10px var(--color-light),-5px -5px 10px var(--color-shadow);user-select: none;/*增加过渡*/transition: box-shadow var(--duration-ani) ease-out;
}div:active {box-shadow: 0 0 0 rgba(0, 0, 0, 0),0 0 0 rgba(0, 0, 0, 0),inset 5px 5px 10px var(--color-light),inset -5px -5px 10px var(--color-shadow);font-weight: 700;color: aqua;
}</style>
</head></html>

运行效果:

点击效果:

拟态按钮生成器

http://santhoshsivan.com/neu.html

友情链接

玻璃拟态
拟态键盘

css实现拟态按钮相关推荐

html怎么让导航栏平均分布,CSS 怎么让按钮平均分布
CSS 怎么让按钮平均分布等分布局是指子元素平均分配父元素宽度的布局方式, 本文将介绍实现等分布局的 4 种方式一, float 缺点: 结构和样式存在耦合性, IE7 - 浏览器下对宽度百分比取 ...
从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
css笔记——css 实现自定义按钮
css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...
设置html按钮点击事件无效果,css怎么设置按钮不能点击？
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...
纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
遥控器页面html,CSS模仿遥控器按钮
注:本demo在小程序环境中测试,其他h5,pc网页通用,只需将小程序单位和标签名改成通用的即可,并按照自己的需求做适配即可. 大体思路:四个相同的正方形田字形布局,配合旋转属性即可. html结构 ...
html消除按钮边框,在Chrome中从css自定义样式按钮中删除蓝色边框
在Chrome中从css自定义样式按钮中删除蓝色边框我正在做一个网页,我想要定制样式标签.因此,对于CSS,我说:border: none..现在它在Safari中运行得很好,但是在Chrome中, ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

css实现拟态按钮

拟态按钮 dome

拟态按钮生成器

友情链接

css实现拟态按钮相关推荐

最新文章

热门文章

css实现 拟态按钮

拟态按钮 dome

拟态按钮生成器

友情链接

css实现 拟态按钮相关推荐

最新文章

热门文章

css实现拟态按钮

css实现拟态按钮相关推荐