css实现拟态按钮

织_网

已于 2022-05-06 17:23:27 修改

阅读量1.4k

点赞数

文章标签： css html css3

于 2022-05-06 16:13:19 首次发布

本文链接：https://blog.csdn.net/qq_43869822/article/details/124612590

版权

拟态按钮 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

在这里插入图片描述

友情链接

玻璃拟态
 拟态键盘

织_网

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css实现拟态按钮

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>新拟态按钮</title><body> <div> 拟态按钮 </div></body><style>body { display: grid; height: 100vh;
复制链接

扫一扫