Esta clase de botones minimalista utilizando solo HTML son muy útiles, porque lo puedes poner donde quieras en tu web o blog sin complicaciones y se adaptan a tus necesidades.
Puedes utilizarlo en una entrada de tu blog o añadirlo en un gadget.
► Poner en HTML de la entrada este código:
<div class="boton-cpb"><a href="URL-que-desees-poner" rel="nofollow" target="_blank">Botón Minimalista</a></div>
Solo hay que reemplazar lo que esta en en rojo por la URL y el texto, en azul, correspondiente y guárdalo.
► Para integrarlo en tu blog tienes que ir a:
Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado
Pegamos el siguiente código css:
.boton-cpb a{
font:normal normal 12px Montserrat; /*Tamaño y tipo de letra*/
text-transform: uppercase; /*Para que esté en mayúsculas, sino borrar esta línea*/
letter-spacing: 3px; /*Espaciado entre letras, si no queréis borrar línea*/
background: #333333; /*Color de fondo del botón*/
border: 1px solid #333333; /*Tamaño, estilo y color del borde*/
color:#ffffff; /*Color de las letras*/
padding: 5px;
text-decoration:none;
}
.boton-cpb a:hover{ /*Al pasar el ratón por encima*/
background: #eeeeee; /*Color del fondo al pasar el ratón por encima*/
border: 1px solid #eeeeee; /*Tamaño, estilo y color del borde al pasar el ratón*/
color:#000; /*Color de las letras al pasar el ratón*/
text-decoration:none;
}
Resultado del Botón minimalista
El atributo "nofollow" ofrece a los webmasters un modo de indicar a los motores de búsqueda "No seguir los enlaces de esta página" o "No seguir este enlace concreto".
No hay comentarios -
Publicar un comentario