css小灯泡按钮 |css 四舍五入

CSS代码：
/*定义按钮样式*/
.bulb_btn{
width:50px;height:50px;
background-color:#fff;border:1px solid #333;
border-radius:50%;text-align:center;
position:relative;cursor:pointer;
}
.bulb{
width:25px;height:25px;background-color:#ff0;
border-radius:50%;position:absolute;
left:50%;top:50%;transform:translate(-50%,-50%);
transition:all .3s ease-in-out;
}
.bulb:before,
.bulb:after{content:"";position:absolute;}
.bulb:before{
width:5px;height:5px;background-color:#333;
left:5px;top:5px;border-radius:50%;
}
.bulb:after{
width:3px;height:15px;background-color:#333;
left:50%;top:8px;transform:translateX(-50%);
}
/*实现按钮hover时的效果*/
.bulb_btn:hover .bulb{
width:50px;height:50px;background-color:#ff0;
border:none;border-radius:0;transform:translate(0,0);
}
.bulb_btn:hover .bulb:before{
width:8px;height:8px;left:50%;top:10px;
transform:translateX(-50%);background-color:#fff;
}
.bulb_btn:hover .bulb:after{
width:5px;height:20px;left:50%;top:18px;
transform:translateX(-50%);
}

首先，大家定义了按钮样式和灯泡样式，为了使灯泡在按钮中居中，大家将灯泡的位置用相对定位的方式来定义。

接下来，大家通过:hover在按钮hover时实现灯泡的动态效果，包括更改灯泡的大小，位置，边框等属性，并且设置了灯泡内部的小圆点和线条的新属性。

最后，大家只需要将灯泡和按钮组合在一起，就可以得到一个漂亮的小灯泡按钮了。实现灯泡按钮的方式很多，大家可以根据需要对代码进行修改，使之更符合大家所需要的样式。