16 de febrero de 2016

Botones con css para el blog


Botones con css


Para contar en nuestro blog o pagina con estos botones de colores sencillos con CSS, tenemos primero que definir los estilos para esto ir a:

Diseñador de plantillas ► Avanzado ► Añadir CSS ►Añadir código CSS personalizado





pega el código CSS

.boton-bseA a{
text-decoration:none;
font-family: 'Play', sans-serif;
font-size: 20px;
font-stretch: normal;
background: none repeat scroll 0% 0% #007abe;
border: 1px solid #007abe;
color: #FFF;
font-weight: 70;
font-style: normal;
cursor: pointer;
border-radius: 4px;
box-shadow: 2px 2px 2px #CCC;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.boton-bseA a:hover {
background: none repeat scroll 0% 0% #323638;
}
.boton-bseV a{
text-decoration:none;
font-family: 'Play', sans-serif;
font-size: 20px;
font-stretch: normal;
background: none repeat scroll 0% 0% #00aea2;
border: 1px solid #00aea2;
color: #FFF;
font-weight: 70;
font-style: normal;
cursor: pointer;
border-radius: 4px;
box-shadow: 2px 2px 2px #CCC;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.boton-bseV a:hover {
background: none repeat scroll 0% 0% #323638;
}
.boton-bseR a{
text-decoration:none;
font-family: 'Play', sans-serif;
font-size: 20px;
font-stretch: normal;
background: none repeat scroll 0% 0% #f2706b;
border: 1px solid #f2706b;
color: #FFF;
font-weight: 70;
font-style: normal;
cursor: pointer;
border-radius: 4px;
box-shadow: 2px 2px 2px #CCC;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.boton-bseR a:hover {
background: none repeat scroll 0% 0% #323638;
}

Este es el resuldado













En el Html de la entrada o en un Gadget HTML/Javascript  pegar lo siguiente cuando desees: 

<div class="boton-bseA"><a href="URL-que-desees-poner" rel="nofollow" target="_blank">Botón Azul</a></div>
<div class="boton-bseV"><a href="URL-que-desees-poner" rel="nofollow" target="_blank">Botón Verde</a></div>
<div class="boton-bseR"><a href="URL-que-desees-poner" rel="nofollow" target="_blank">Botón Rojo</a></div>


Nota: Para la tipografía necesitas copiar y pegar el siguiente código arriba de </head>


<link href='https://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'/>

No hay comentarios:

Publicar un comentario

Diseño por Blogger Sin Escalones Con la tecnología de Blogger.