Ok, now we'll style some checkbox buttons to try and match the appearance of some recording studio buttons ("REC"). The following is a screenshot of the final result:
First, let's add the checkboxes to index.html
, just after the previous article
element:
<article id="old_panel"> <form> <input type="checkbox" id="rec"> <label class="rec" for="rec">RECORD</label> <input type="checkbox" id="at_field"> <label class="at_field" for="at_field">AT FIELD</label> </form> </article>
As we did in the previous chapter, we now want to hide the input
element. Let's do this by adding a few lines to application.css
:
#old_panel input{
visibility: hidden;
position: absolute;
top: -999px;
clip: 'rect(0,0,0,0)';
}
#old_panel label{
display: block;
position: relative;
width: 300px;
padding-left: 125px;
cursor: pointer;
line-height: 140px;
height: 130px;
font-family: 'Alegreya SC', serif...