ボタンをクリックしてください
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; }