Mes: octubre 2014

Lindos botones con CSS (II)

botones con fondo lindo
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…)

Rectángulo semi transparente

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

Walter Siegmund – Own work

Lindos botones con CSS

Botones lindos con CSSEn uno de mis trabajos tenía que hacer unos botones más o menos acordes con el resto del sitio y se me ocurrió hacerlos en un rectángulo con sombra, sobre una franja de otro color.

¿Por qué no hacerlos directamente como imagen?

Porque la regla número uno de la accesibilidad es separar el contenido del formato. Un invidente puede escuchar el nombre de las opciones únicamente si estas están insertadas como texto.

Un dispositivo muy lento mostrará los textos y tardará mucho en cargar las imágenes.

¿Cómo se hacen?

1) En el archivo CSS se definen los tipos de DIV que se usarán:

Un div contiene la franja que está debajo del rectángulo.

Es un div que mide 50px de altura, y que tiene como fondo una imagen (porque esa franja anaranjada tiene un degradado). La imagen de fondo se repite horizontalmente cuanto sea necesario, adaptándose al ancho del DIV.

Este es el código CSS del marco:

.marco {
width: 99%;
height: 50px;
 background-color: #fff;
background: url('https://blabla/pix/fondoopciones.png');
background-repeat: repeat-x;
}

Y este es el CSS del botón en sí

.boton {

 width: 80%;
 line-height: 40px;
 background-color: #773156;
 color: #fff;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 box-shadow: 5px 5px 2px #999; 
}
.boton a:link {
 color: #fff;
 text-decoration: none;
 }

.boton a:hover {

 color: #fff;
 text-decoration: none;
 }

.boton a:visited {

 color: #fff; text-decoration: none;

}

Luego, en el HTML utilizo un DIV dentro de otro:

<div class="marco">
<div class="boton">
<a href="enlacedelboton">Preguntas frecuentes</a>
</div>
</div>