下面是一个使用纯CSS实现的按钮点击展开收缩的实例：
<style>
.collapse {
height: 0;
overflow: hidden;
transition: height 0.3s ease-out;
}
.expand:checked ~ .collapse {
height: auto;
}
</style>
<p>点击按钮展开内容：</p>
<input type="checkbox" id="btn" >
<label for="btn">展开</label>
<div >
<p>这里是隐藏的内容，点击按钮可展开。</p>
</div>在这个实例中，
.collapse元素设置了height: 0; overflow: hidden;，表示默认状态下是隐藏的。同时也设置了transition: height 0.3s ease-out;，使其在展开和收缩时有平滑过渡的效果。.expand:checked ~ .collapse表示当.expand被选中时（即按钮被点击时），后续的.collapse元素就会呈现出展开的状态，.expand和.collapse之间使用了波浪符~，表示这两个元素之间的关系。通过这样的CSS样式设置，在页面中会出现一个按钮和一段隐藏的内容，当点击按钮时，隐藏的内容就会展开显示出来，这样可以轻松地实现页面的交互效果。
上一篇：css按钮离上边框
下一篇：css按钮取消按键高低
