Pancreatico De Gnomeregan Pancreatico De Gnomeregan - 5 months ago 10
CSS Question

How to create two or more buttons with two mini buttons at bottom?

I'm trying to create this button combination:

http://i.stack.imgur.com/ZA44E.png

But I can't put that two mini buttons (the red an the blue) down the main buttons, any idea how to do this?

This is what I have:

<button class="btn btn-info">P</button>
<button class="btn btn-info">Q</button>
<button class="btn btn-info">R</button>
<button class="btn btn-info">S</button>
<button class="btn btn-info">Z</button>


EDIT

This is what I'm working for:

http://i.stack.imgur.com/3KDFM.png

I need two mini buttons down the skyblue buttons you see.

<div class="container">
<div class="row">
<br>
<div style="text-align:left">
<br>
<p><strong>Número de proposiciones simples a usar: </strong><input id="inp1" type="number" min="1" max="5"></input>
</p>
</div>
<table id="myTable" class="table table-bordered table-hover well">
<tr id="trL1">
<td><b>Proposición</b></td>
<td><b>Valor de verdad</b></td>
</tr>
<tr id="trL2">
<td id="PLF">Arma tu proposición con los botones de abajo</td>
<td id="VoF"> ¿¿ V o F ??</td>
</tr>
<tr style="text-align:left" id="btnsL">
<td colspan="2" id="btnL">
<button class="vL1 vL3i btn btn-info">(</button><button class="vL1 vL3f btn btn-info" disabled>)</button><button class="vL1 oL btn btn-info" disabled="disabled">∨</button><button class="vL1 oL btn btn-info" disabled="disabled">∧</button><button class="vL1 oL btn btn-info" disabled="disabled">⇒</button><button class="vL1 oL btn btn-info" disabled="disabled">⇔</button>
<br>
<button class="vL1 vL3n btn btn-info">∼</button><button class="btn btn-info">P</button><button class="btn btn-info">Q</button><button class="btn btn-info">R</button><button class="btn btn-info">S</button><button class="btn btn-info">Z</button>

</td>
</tr>
</table>
<button id="respuesta">Ver Resultado</button><button id="borrarPL">Borrar</button><button id="restartPL">Reiniciar</button>
<p id="contC"><strong>10</strong></p> caracteres restantes<br><br><br><br>

</div> <!-- Fin row -->
<div class="row">
<div class="procedimiento">
<table class="table table-bordered table-hover well">
<tr style="color:rgb(100,130,130)"><td>procedimiento 1</td><td>procedimiento 2</td><td>procedimiento 3</td><td>procedimiento 4</td><td>procedimiento 5</td></tr>
</table>
</div>
</div>
</div>

Answer

Is something like this of any use?

* {  
    box-sizing: border-box;
}
.container{
  position:relative;
  float:left;
  width:70px;
  height:70px;
  margin-right:5px;
}
.btn-info{  
  width:100%;
  height:100%;
  font-size:30px;
}
.btn-miniLeft{
  position:absolute;
  left:0px;
  width:50%;
  border-color:red;
}
.btn-miniRight{
  position:absolute;
  right:0px;
  width:50%;
  border-color:blue;
}
<div class="container">
      <button class="btn btn-info">P</button>
      <button class="btn btn-miniLeft">P1</button>
      <button class="btn btn-miniRight">P2</button>
</div><div class="container">
<button class="btn btn-info">Q</button>
      <button class="btn btn-miniLeft">Q1</button>
      <button class="btn btn-miniRight">Q2</button>
</div>
<div class="container">
<button class="btn btn-info">R</button>
      <button class="btn btn-miniLeft">R1</button>
      <button class="btn btn-miniRight">R2</button>
</div>
<div class="container">
<button class="btn btn-info">S</button>
      <button class="btn btn-miniLeft">S1</button>
      <button class="btn btn-miniRight">S2</button>
</div>
<div class="container">
<button class="btn btn-info">Z</button>
      <button class="btn btn-miniLeft">Z1</button>
      <button class="btn btn-miniRight">Z2</button>
</div>