Al igual que en el post anterior, voy a compartir el código HTM y CSS para hacer unos botones lindos y accesibles, ya que el contenido está separado del formato.
En este caso usé una imagen transparente de frente y una imagen de unas flores como fondo*.
Imagen de frente:
Rectángulo semi transparente hecho en Gimp (lo pongo sobre una superficie gris para que se pueda ver…)
El código es prácticamente el mismo que en el post anterior, pero le modifiqué los márgenes y el padding para que se viera el botón transparente dentro del otro.
Este es el HTML. En el bloque de la izquierda abro y cierro el “marco” por cada botón, y en el de la derecha el “marco” contiene los otros tres divs:
<div style=”width: 15%; float: left;”>
<div class=”marco”>
<div class=”boton”><p>Opción 1</p>
</div></div>
<div class=”marco”>
<div class=”boton”><p>Opción 2</p>
</div></div>
<div class=”marco”>
<div class=”boton”><p>Opción 3</p>
</div></div>
<div class=”marco”>
<div class=”boton”><p>Opción 4</p>
</div></div>
</div>
<div style=”width: 15%; float: left; margin-left: 20px;”>
<div class=”marco” style=”margin: 10px;”>
<div class=”boton”><p>Opción 1</p>
</div>
<div class=”boton”><p>Opción 2</p>
</div>
<div class=”boton”><p>Opción 3</p>
</div>
</div>
</div>
Y acá está el CSS:
.marco {
width: 99%;
background-image: url(‘http://irisfernandez.com.ar/imagenes/flores.jpg’);
background-repeat: repeat-none;
padding-top: 10px;
padding-bottom: 10px;
}
.boton {
width: 80%;
line-height: 40px;
background-image: url(‘http://irisfernandez.com.ar/imagenes/transparente.png’);
color: #000;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.boton a:link {
color: #000;
text-decoration: none;
}
.boton a:hover {
color: #000;
text-decoration: none;
}
.boton a:visited {
color: #000; text-decoration: none;
}
*Imagen de fondo descargada de Wikimedia Commons:
Douglasia laevigata 2453CC BY-SA 3.0