css中button按钮的状态有哪些
发表于:2025-02-05 作者:千家信息网编辑
千家信息网最后更新 2025年02月05日,小编给大家分享一下css中button按钮的状态有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
千家信息网最后更新 2025年02月05日css中button按钮的状态有哪些button按钮的状态代码不同效果示例
小编给大家分享一下css中button按钮的状态有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
.btn{
appearance:none;
background:#026aa7;
color:#fff;
font-size:20px;
padding:0.65em1em;
border-radius:4px;
box-shadow:inset0-4px00rgba(0,0,0,0.2);
margin-right:1em;
cursor:pointer;
border:0;
}
.btn1:hover{
box-shadow:inset0-4px00rgba(0,0,0,0.6),008px0rgba(0,0,0,0.5);
}
.btn1:focus{
position:relative;
top:4px;
box-shadow:inset03px5px0rgba(0,0,0,0.2);
outline:0;
}
.btn2:hover{
box-shadow:inset0-4px00rgba(0,0,0,0.6),008px0rgba(0,0,0,0.5);
}
.btn2:active{
position:relative;
top:4px;
box-shadow:inset03px5px0rgba(0,0,0,0.2);
outline:0;
}
.btn2:focus{
outline:0;
}