Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

En este tutorial veremos como agregar botones para blogger con varios opciones de colores, ya hemos visto mas estilos de botones en este blog y hoy quiero ofrecerles uno nuevo tutorial sobre botones

Comencemos:

  • Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
  • Paso 2: Buscamos la siguiente linea (Ctrol + F )
]]></b:skin>
  • Paso 3: Justo por encima de ]]></b:skin> pegamos el código CSS
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: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
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: -4px; top: -4px;
padding: 4px;
z-index: -1;
background: #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 0 1px #e1e1e1;
-moz-box-shadow: inset 0 0 0 1px #e1e1e1;
box-shadow: inset 0 0 0 1px #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;
}

Ahora agregaremos nuestros botones en una entrada  

Paso 4: Dentro de una entrada pegamos el siguiente código HTML
<a class="boton" href="#">Boton Simple</a>
<a class="boton naranja" href="#">Boton naranja</a>
<a class="boton rojo" href="#">Boton  rojo</a>
<a class="boton rosa" href="#">Boton rosa</a>
<a class="boton violeta" href="#">Boton violeta</a>
<a class="boton azul" href="#">Boton azul</a>
<a class="boton celeste" href="#">Boton celeste</a>
 <a class="boton verde" href="#">Boton verde</a>
 <a class="boton amarillo" href="#">Boton amarillo</a>
 <a class="boton negro" href="#">Button negro</a>

Listo ya estaríamos disfrutando de nuestros botones 100% realizados con CSS.


- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar