沉浸式开关按钮

妄想成为大佬

于 2022-07-16 14:20:59 发布

阅读量362

点赞数

分类专栏： css 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_32908349/article/details/125816110

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css揭秘之沉浸式按钮
1.打开按钮，按钮下沉
2.关闭按钮，按钮归位

<main>
<input type="checkbox" id="awesome" />
<label for="awesome">点一下试试吧!</label>
</main>
<style>
input[type="checkbox"] {
 position: absolute;
 clip: rect(0,0,0,0);
}
input[type="checkbox"] + label {
 display: inline-block;
 padding: .3em .5em;
 background: #ccc;
 background-image: linear-gradient(#ddd, #bbb);
 border: 1px solid rgba(0,0,0,.2);
 border-radius: .3em;
 box-shadow: 0 1px white inset;
 text-align: center;
 text-shadow: 0 1px 1px white; 
 }
input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
 box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
 border-color: rgba(0,0,0,.3);
 background: #bbb; 
 }
</style>