Crear un botón con un contenedor diseñado en CSS

[cereal]

Buenas,

Primero explico que tengo, y luego el resultado que me gustaria tener:

Tengo un cuadro, que dentro, tiene dos cuadros mas, o sea, un contenedor con dos sub-contenedores dentro (madre y 2 hijas), todo en CSS.

Madre: CUADRO
Hijas: CUADRO_HIJA_1 y CUADRO HIJA_2

Código CSS:

Código PHP:

  .cuadro {
    height: 50px;
    width: 80px;
    border: double;
}

.cuadro_hija_1 {
    height: 50px;
    width: 50px;
    position: relative;
    background-color: #9CA3D5;
    color: black;
    text-align: left;
    font: 8pt Verdana;
    float: left;
}
.cuadro_hija_2 {
    height: 50px;
    width: 30px;
    position: relative;
    background-color: #7077A4;
    color: black;
    text-align: right;
    font: 15pt Verdana bold;
    float: right;
} 
   

Código PHP:

Código PHP:

      <div class='cuadro'>
            <div class='cuadro_hija_1'>
                        M:<br>
                        T:<br>
                        N:<br>
            </div>
            <div class='cuadro_hija_2'>12</div>
    </div> 
   

Con eso, obtengo este dibujo:




Ha quedado bien, el contenedor madre, que es el recuadro de doble línea, mientras que las dos hijas, están dentro de la madre, con colores diferentes, una a la izquierda y la otra a la derecha.
La duda que me surje es que TODO debe ser un BOTÓN, o sea, el contenedor MADRE, es un botón (con toda la información dinámida en el interior, que se puede variar tanto la hija de la izquierda como los numeros de la derecha, controlado en PHP)
No sé donde poner el FORM ni el INPUT.

Con el siguiente código, se me ha quedado tal como se muestra en la gráfica:

Código PHP:

          <div class='cuadro'>
                <form action='insertar-php' method='post'>
                <input type='submit'>
                <div class='cuadro_hija_1'>
                        M:<br>
                        T:<br>
                        N:<br>
                </div>
                <div class='cuadro_hija_2'>12</div>
                </form>
        </div> 
   

No se si me he explicado bien, podeis preguntar y os aclaro....

¡Gracias!

[lair]

Hola.

Si te entendi bien, creo que necesitas algo como esto:

Código CSS:

.cuadro {
    width: 115px;
    border: double;
}
 
.cuadro_hija_1 {
    height: 50px;
    width: 85px;
    position: relative;
    background-color: #9CA3D5;
    color: black;
    text-align: left;
    font: 8pt Verdana;
    float: left;
}
.cuadro_hija_2 {
    height: 50px;
    width: 30px;
    position: relative;
    background-color: #7077A4;
    color: black;
    text-align: right;
    font: 15pt Verdana bold;
    float: right;
}  
.clear {clear:both;font-size:0}
input{
    background:none repeat scroll 0 0 transparent;
    color:#000000;
    height:66px;
    position:absolute;
    width:116px;
    z-index:2;
}
 

Código HTML:

<div class="cuadro">
                <form method="post" action="insertar-php">
                <input value="" type="submit">
                </form>
                <div class="cuadro_hija_1">
                        M:<br>
                        T:<br>
                        N:<br>
                </div>
                <div class="cuadro_hija_2">12</div>
                <div class="clear"></div>
</div>
 

Suerte.

[cereal]

Si, justamente necesito eso, un botón invisible, tal como me has escrito, pero en este caso, se me ha desaparecido todos los INPUTS (tanto botones como inputs de texto) de la web!!!

¿Se puede personalizarlo para cada INPUT por separado?

[lair]

si, eso se que se me paso.

en lugar de poner las propiedasdes en la etiqueta input

Código CSS:

input{
    background:none repeat scroll 0 0 transparent;
    color:#000000;
    height:66px;
    position:absolute;
    width:116px;
    z-index:2;
}
 

ponlas en una clase

Código CSS:

.boton{
    background:none repeat scroll 0 0 transparent;
    color:#000000;
    height:66px;
    position:absolute;
    width:116px;
    z-index:2;
}
 

y a los input (botones) que vallan a tener estas catacteristicas los pones como:
<input value="" type="submit" class='boton'>

NOTA: la clase puede tener cualquier otro nombre

suerte