Íconos 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()});
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()});
}
}());
}