Crear botones sencillos con CSS para Blogger

En este tutorial les enseñaré a crear sus propios botones personalizados, pero para ello será necesario entender algunos conceptos básicos los cuales explicaré detalladamente en esta entrada.

La estructura de un botón es muy sencilla y se realiza gracias a la etiqueta </input>, pero como se sabe, esta etiqueta se puede convertir en distintos tipos de contenido:

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

La que nos interesará corresponde al tipo button, la cual convierte un input en un botón.

El tutorial:

Paso 1: La estructura de un botón:

Debemos saber bien que para insertar un botón se hace de la siguiente forma:

<input type="button" value="Nombre Botón"/>

Esta es la estructura básica, no contiene ningún tipo de acción por lo que al presionar en él no pasará nada.

Si queremos que al presionar en el botón abra una dirección URL, puedes hacerlo apoyándote con javascript:

Abrir la URL en la misma ventana:

<input onclick="window.location='URL'" type="button" value="Nombre Botón" />

Abrir URL en nueva pestaña:

<input onclick="window.open('URL')" type="button" value="Nombre Botón"/>

Paso 2: Incluyendo las clases:

Ahora que ya sabemos cómo se crea un botón, lo que haremos será crear las clases, yo haré distintas configuraciones de colores basándome en distintas clases:

<input class="boton color" onclick="window.location='URL'" type="button" value="Nombre Botón" />

Ya he definido 2 clases, la boton y la color, cuando las palabras se separan en una clase o ID, se establecen 2 o más selectores, en este caso incluí sólamente 2, pero si deseas crear una tercera para incluir un tamaño por ejemplo, no hay problemas. El valor color deberás reemplazarlo por el nombre del color que establecerás en el paso 3.

Paso 3: Creando los estilos:

Ahora que ya tenemos los botones con las 2 clases establecidas, procederemos a crear los atributos:

.boton {
/*Acá deberán ir los atributos de la class boton*/
}
.color {
/*Acá deberán ir los atributos del color*/
}

En esta parte, deberás crear tantos colores como desees, en este ejemplo podrás apreciar que he creado 4 colores distintos para los botones y he establecido el formato de los botones normales, es sólo un ejemplo pero si te interesan los botones puedes tomarlos sin problemas.

.boton { /*botones*/
font-size:12px;
font-weight:bold;
padding:4px;
cursor:pointer;
border:1px solid #fff;
border-radius:4px;
text-shadow: 0 -1px 1px #222;
box-shadow:1px 1px 1px 1px #969696;
font-family: Century Gothic, sans-serif; 
border-bottom: 1px solid #222;
}

.boton:active { /*AL PRESIONAR*/
box-shadow: inset 1px 1px 1px #222;
}

.azul { /*Color Azul*/
background-color: #2d6cb9;
color:#fff;
}

.rojo { /*Color Rojo*/
background-color: #e33100;
color:#fff;
}

.verde { /*Color Verde*/
background-color:#367f36;
color:#fff;
}

.naranjo { /*Naranjo*/
background-color: #ff5c00;
color:#fff;
}

 Ahora bien, estos código deberás situarlos antes de:

]]></b:skin>

Cuando quieras usar un botón podrás hacerlo reemplazando el valor color del selector por el color deseado.


Los demos de los botones que creé a modo de ejemplo son los siguientes: