ボタンをクリックしてください
HTML
<div class="button"> <input type="checkbox" name="morphing_check" value="morphing" id="morphing_check"> <label for="morphing_check">ボタン</label> </div>
CSS
.button label{
padding:.3em;
border:1px solid #ccc;
background:#ddd;
}
.button input[type="checkbox"]{
visibility:hidden;
}
.button label:before{
margin:-3px 10px 0 0;
content:" ";
display:inline-block;
width:13px;
height:13px;
background:url( https://tenman.info/labo/css/files/del.png );
background-size:contain;
vertical-align:middle;
background-repeat:no-repeat;
transition: all 1s ease-in-out;
}
.button input[type="checkbox"]:checked ~ label:before{
margin:-3px 10px 0 0;
content:" ";
display:inline-block;
width:13px;
height:13px;
background:url( https://tenman.info/labo/css/files/checked.png );
background-size:contain;
vertical-align:middle;
background-repeat:no-repeat;
transition: all 1s ease-in-out;
}