状态按钮自定义

效果入下图所示：

html部分代码如下所示：

<div class="foot_butslayout">
  	<div class="state">
         <button class="state_btn">
             <div class="state_word">11111</div>
             <div class="state_time">2019.09.21 09:30</div>
             <input class="chexchoose" type="checkbox"  name="btncheck" checked>
         </button>
         <div class="borderblue"></div>
         <button class="state_btn">
             <div class="state_word">11111</div>
             <div class="state_time">2019.09.21 09:30</div>
             <input class="chexchoose" type="checkbox" name="btncheck">
         </button>
         <div class="borderblue"></div>
         <button class="state_btn">
             <div class="state_word">11111</div>
             <div class="state_time">2019.09.21 09:30</div>
             <input class="chexchoose" type="checkbox" name="btncheck">
         </button>
         <div class="borderblue"></div>
         <button class="state_btn">
             <div class="state_word">111111</div>
             <div class="state_time">2019.09.21 09:30</div>
             <input class="chexchoose" type="checkbox" name="btncheck">
         </button>
     </div>
 </div>

css部分代码如下所示：

.state{
	text-align: center;
}
/* 状态按钮 */
button.state_btn{
	position: relative;
	padding: 0;
	background: #FFFFFF;
	border-radius: 5px;
	border-radius: 5px;
	border: none;
}
button.state_btned{
	border: 1px solid #2DA7E0;
}
div.state_word{
	font-family: PingFangSC-Medium;
	font-size: 16px;
	color: #999999;
	text-align: center;
	letter-spacing: 0;
	line-height: 16px;
	margin-top: 10px;
}
/* 被选中时文字的样式 */
div.state_worded{
	color: #2DA7E0;
}
div.state_time{
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #999999;
	letter-spacing: 0;
	line-height: 12px;
	margin: 6px 12px 20px;
}
/* 灰色线条 */
.bordergray{
	display: inline-block;
	width: 49px;
	height: 1px;
	background-color: #DCDCDC;
}
/* 蓝色线条 */
.borderblue{
	display: inline-block;
	width: 49px;
	height: 1px;
	background-color: #2DA7E0;
}
.title_word{
	font-family: PingFangSC-Regular;
	font-size: 14px;
	color: #919191;
	letter-spacing: 0;
	line-height: 16px;
	text-align: center;
	margin-top: 32px;
}
input[type=checkbox]{
	zoom: 1;
	outline: none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
	-ms-appearance:none;
}
input.chexchoose{
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid #2DA7E0;
	bottom: -12px;
	left: 0;
	right: 0;
	margin: auto;
}
input[type=checkbox]:checked{
	background-image: url(../images/choose.png);/*选中时按钮的背景图片*/
	background-size:110%;
	background-position:center;
}