Mediante la clase input y el type igual a button
<input type="button" class="botonimagen" value="Texto del boton">
En este punto nos encontramos con una serie de inconvenientes. Por ejemplo:
- El botón se adapta al tamaño del texto, por lo que si la imagen es más grande que el texto, la imagen no se verá en su completitud.
- La imagen se repite tantas veces como se necesite para llenar el espacio del botón. Esto puede ser un problema si estamos utilizando una imagen pequeña
Para paliar estos efectos y con el fin de que nos quede un botón cual menos, curioso. Podemos jugar con un conjunto de atributos, que son:
- height, para definir la altura del botón.
- width, para definir el ancho del botón
- background-repeat, para identificar el numero de veces que se va a repetir la imagen
- background-position, posición de la imagen: arriba, abajo, en el centro.
Finalmente el código de la clase nos quedaría de la siguiente forma:
De esta forma podemos conseguir crear un botón con imagen de fondo en CSS. Espero que les haya sido de utilidad.
