youtubeのシアターモードっぽいスタイルの実装です。
個別投稿ページでご覧ください。
Theater Mode
HTML
<span class="switch" tabindex="0">Theater Mode</span> <div class="button"> <input type="checkbox" name="morphing_check" value="morphing" id="morphing_check"> <label for="morphing_check">シアターモード</label> <div class="theater"></div> </div>
CSS
.theater{
margin-top:2em;
transition: all 1s ease-in-out;
}
.button input[type="checkbox"]:checked ~.theater{
margin:2em -50%;
padding:10px 50%;
background:rgba(0,0,0,1);
text-align:center;
transition: all 1s ease-in-out;
}
.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;
}