Botones de varios colores con CSS en tu blog

Para añadir estos botones con CSS en tu blog de blogger hay que:

• Plantilla
• Personalizar
• Diseñador de Plantillas
• Avanzado
• Añadir código CSS personalizado, en el recuadro pegar el siguiente código:

a.boton {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
position: relative;
margin: 10px;
display: inline-block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#1a000000',GradientType=0 ); background-color: #B9B9B9;
}
a.boton:after {
content: '';
position: absolute;
width: 100%; height: 100%;
left: 0px; top: 1px;
padding: 0px;
z-index: -5;
background: #eee;
-webkit-border-radius: 20px;
-moz-border-radius: 0px;
border-radius: 20px;
-webkit-box-shadow: inset 10 10 10 11px #e1e1e1;
-moz-box-shadow: inset 10 10 10 11px #e1e1e1;
box-shadow: inset 10 10 10 11px #e1e1e1;
}
a.boton:hover {
background-image: none;
}
a.boton:active {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background-image: linear-gradient(top bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#00000000',GradientType=0 );
}
a.boton.naranja {
background-color: #FD5B01;
}
a.boton.rojo {
background-color: #FD0113;
}
a.boton.rosa {
background-color: #FD01B6;
}
a.boton.violeta {
background-color: #8201FD;
}
a.boton.azul {
background-color: #0180FD;
}
a.boton.celeste {
background-color: #01E1FD;
}
a.boton.verde {
background-color: #A2D111;
}
a.boton.amarillo {
background-color: #FDD301;
}
a.boton.negro {
background-color: #000;
}

Código en la entrada Html

<a class="boton" href="URL">Boton gris</a>
<a class="boton naranja" href="URL">Boton naranja</a>
<a class="boton rojo" href="URL">Boton rojo</a>
<a class="boton rosa" href="URL">Boton rosa</a>
<a class="boton violeta" href="URL">Boton violeta</a>
<a class="boton azul" href="URL">Boton azul</a>
<a class="boton celeste" href="URL">Boton celeste</a>
<a class="boton verde" href="URL">Boton verde</a>
<a class="boton amarillo" href="URL">Boton amarillo</a>
<a class="boton negro" href="URL">Button negro</a>

Leer más »

Botones con CSS para el blog

Para añadir estos botones con CSS en tu blog de blogger hay que:

• Plantilla
• Personalizar
• Diseñador de Plantillas
• Avanzado
• Añadir código CSS personalizado, en el recuadro pegar el siguiente código:

.boton{
display: inline-block;
display: inline;
zoom: 1;
padding: 6px 20px;
margin: 0;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 13px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
background-image: linear-gradient(top, rgba(255,255,255,1),
rgba(255,255,255,0)),
url(data:image/png;base64,iVBORw0KGg[...]QmCC);
transition: background-color .2s ease-out;
background-clip: padding-box; /* Fix bleeding */
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.boton:hover{
background-color: #eee;
color: #555;
}
.boton:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.boton.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background-image: linear-gradient(top, rgba(255,255,255,.3),
rgba(255,255,255,0)),
url(data:image/png;base64,iVBORw0KGg[...]QmCC);
}
.boton.verde{
background-color: #57a957;
border-color: #57a957;
}
.boton.verde:hover{
background-color: #62c462;
}
.boton.verde:active{
background: #57a957;
}
.boton.rojo{
background-color: #c43c35;
border-color: #c43c35;
}
.boton.rojo:hover{
background-color: #ee5f5b;
}
.boton.rojo:active{
background: #c43c35;
}
.boton.azul{
background-color: #269CE9;
border-color: #269CE9;
}
.boton.azul:hover{
background-color: #70B9E8;
}
.boton.azul:active{
background: #269CE9;
}

Código en la entrada Html

<a href="URL" class="boton"> Botón Gris</a>
<a href="URL" class="color rojo boton"> Botón Rojo</a>
<a href="URL" class="color verde boton"> Botón Verde</a>
<a href="URL" class="color azul boton"> Botón Azul</a>

Leer más »

Botones para tu blog, simples hechos con HTML

Esta clase de botones grises hechos con HTML son muy útiles, porque los puedes poner donde quieras en tu web sin complicaciones. Aquí tienen unas variantes para que utilices los que más se adapten a tus necesidades.

Estos son los códigos:

<a href="URL"><input type="submit" value="texto" /></a>

<a href="URL"><span style="font-size: 12pt;"><button id="button_display_embed" style="font-size: 15pt;">texto</button></a>

<a href="URL"><button><span style="color: #cc0000;"><b>texto</b></span></button></a>

Para integrarlos en tu blog solo tienes que ir a:

• Diseño. 
• Añadir un gadget.
• Html Javascript y pegar el código que dejo, solo hay que reemplazar lo que esta en en rojo por la URL y el texto , en azul, correspondiente y guárdalo.

También puede utilizarlos en una entrada de tu blog, como en este caso.

Leer más »