The user will access an HTML screen where they will have some questions and each question will have 3 or 4 answer options in the button format.
When he clicks the button, the button changes color. In blue, it turns red. And so on, at the end the screen will be all marked with the client's options.
EXAMPLE THE FIRST SCREEN
EXAMPLEWITHTHEMOUSEBYPASSINGUPTHEBUTTON
EXAMPLEAFTERCLICKING,ITMUSTBEINRED,ORBE,VISIBLYSHOWINGWHATHASBEENTHECUSTOMER'SSELECTEDOPTION 
I tried to make it as simple as possible. Next time, try to post the code you are working on, as Leon Freire said, to speed up our side:)
Here you are:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Faça como quiser, calango */
label {
width: 50%;
padding: 0 4px;
margin-bottom: 8px;
float: left;
text-align: center;
cursor: pointer;
}
/* Esconde a caixa de seleção */
/* (Creio que opacity:0 e display:none também funcionem) */
label input[type=checkbox] {
position: absolute;
clip: rect(0,0,0,0);
/* Sim, tive que ver como é no Bootstrap :p */
}
/* Padrão dos itens */
label span {
display: block;
background-color: #fff;
color: #1b4486;
padding: 8px;
font-size: 20px;
border: 2px solid #1b4486;
}
/* Quando mouse passa por cima */
label:hover span {
background-color: #639dff;
color: #1b4486;
box-shadow: 1px 1px 5px rgba(255,255,255,.4) inset;
}
/* Quando item selecionado */
label input[type=checkbox]:checked + span {
background-color: #1b4486;
border-color: #ffcc0f;
color: #fff;
}
/* Quando mouse passa por cima de item selecionado */
label:hover input[type=checkbox]:checked + span {
background-color: #d44950;
border-color: #ffcc0f;
}<label>
<input type="checkbox">
<span>Opção 1</span>
</label>
<label>
<input type="checkbox">
<span>Opção 2</span>
</label>
<label>
<input type="checkbox">
<span>Opção 3</span>
</label>
<label>
<input type="checkbox">
<span>Opção 4</span>
</label>
<label>
<input type="checkbox">
<span>Opção 5</span>
</label>
<label>
<input type="checkbox">
<span>Opção 6</span>
</label>
#ck-button {
margin:0px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button label {
float:left;
width:4.0em;
}
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
border-radius:4px;
}
#ck-button label input {
position:absolute;
top:-20px;
}
input:checked +span{
background-color:#911;
color:#fff;
}
#ck-button label:hover {
background-color:lightgray;
}
#ck-button label:hover #o1 + span {
background-color:blue;
}
#ck-button label:hover #o2 + span {
background-color:orange;
}
#ck-button label:hover #o3 + span {
background-color:green;
} <div id="ck-button"><label><input type="checkbox" name="sta_choice" id=all value="All" checked><span>All</span></label></div>
<div id="ck-button"><label><input type="checkbox" name="sta_choice" value="All" ><span>All2</span></label></div>
<div id="ck-button"><label><input type="checkbox" name="sta_choice" id="o1" value="Cold" onclick=handleClick1(this.val);><span class="o1">Cold</span></label></div>
<div id="ck-button"><label><input type="checkbox" name="sta_choice" id="o2" value="Warm" onclick="handleClick1(this.val);"><span>Warm</span></label></div>
<div id="ck-button"><label><input type="checkbox" name="sta_choice" id="o3" value="Active" onclick="handleClick1(this.val);"><span>Active</span></label></div>I think that's what you're after.