Íconos SVG

facebook-svg gplus-svg twitter-svg

Crear un juego de botones

Los botones son muy importantes en HTML, y todos sabemos, realizan acciones importantes con los formularios que los contengan. Podemos utilizar botones <botton> o <input> peró también los podemos crear de otro elemento como por ejemplo <a> o incluso <span>.

A continuación queremos crear un juego de botones ( flat buttons ) que utilizan iconos SVG como elemento decorativo. Podemos crear nosotros el icono SVG, o podemos utilizar uno ya creado. Google, por ejemplo, tiene publicados muchísimos íconos SVG que podemos coger y utilizar libremente.

Google Material Icons: http://google.github.io/material-design-icons/

nosotros nosotros

borrar borrar

carrito carrito

naranja naranja

izquierda derecha

Empezamos creando un fichero llamado contacto.svg donde ponemos el código para el icono SVG. Si sigue este enlace no verá nada, ya que el relleno del trazado es blanco ( fill= "white" ), pero el código sigue allá, y si lo abre en vista de código podrá verlo:



    

En el HTML creamos el botón utilizando un elemento <span>, pero también podemos utilizar un elemento <a> con este propósito.

contacto

En el CSS lo más importante es esto: utilizar contacto.svg - el fichero creado anteriormente - como imagen de fondo.

background-image: url(imagenes-svg/contacto.svg);

Es muy probable que la imagen SVG sea demasiado grande ( width= "24" height= "24" ), pero esto tiene arreglo. El CSS3 cuenta con la propiedad background-size que nos permite redimensionar las imágenes de fondo.

background-size:20px 20px;

*{box-sizing : border-box;}
.boton{
	display:inline-block;
	width:100px;
	height:30px;
	text-align:center;
	font-size:14px;
	border:1px solid #007095;
	border-radius:5px;
	cursor:pointer;
	color:white;
	padding:5px 0 5px 20px;
	background-image: url(imagenes-svg/contacto.svg);
	background-repeat:no-repeat;
	
    background-size:20px 20px;
	background-position:10px 5px;	
	background-color:#008CBA;
}
.boton:hover{ background-color:#007095;}

contacto

Botones grandes

Queremos crear también unos botones grandes, donde los íconos SVG sean también más grandes. No hay ningún problema. Sabemos que las imágenes SVG se redimensionan con elegancia, es lo que las hace tan atractivas.
Para esto en el CSS creamos una clase .grande que redimensiona el boton creado anteriormente.

background-size:25px 25px;

contacto


.boton.grande{
	width:120px;
	height:40px;
	font-size:16px;
	padding:10px 0 1px 25px;
	background-size:25px 25px;
	background-position:14px 7px;
	}

contacto

Puede un <span> enviar un formulario?

Claro que sí: utilizando JavaScript: Un bucle for recorre todos los elementos cuya clase es .enviar. Al hacer clic en uno de estos elementos el formulario al cual pertenece es enviado gracias al método submit().

elBoton.addEventListener("click", function(){formulario.submit()});

Nombre: Apellido:

Enviar

Nombre: Apellido:

Enviar

Nombre: Apellido:

Enviar


var botones = document.getElementsByClassName("enviar");
var formularios = document.getElementsByTagName("form");
	for(var i=0; i < botones.length; i++){
		(function () { 
			if(botones[i].hasAttribute("id") && formularios[i].hasAttribute("id") ){
				var elId = botones[i].id;
				var elBoton = document.getElementById(elId); 
				var formulario = document.getElementById("formulario"+(i+1));
				elBoton.addEventListener("click", function(){formulario.submit()});
		}
		}()); 
	}

Nombre: Apellido:

Enviar

Nombre: Apellido:

Enviar

Nombre: Apellido:

Enviar