4 Estilos de Botones css para tu Blog

Como ya saben me gusta personalizar mi blog a lo que mas pueda sin afectar mucho su velocidad, por ende traigo esta entrada donde veremos 4 estilos de Botones css, claro que mas atractivo que unos botones tipo descarga con efecto hover? exacto, nada, los botones los cree usando estilos css3 con algunos variados efectos hover no siendo mas te los presentare:

Como colocar Botones en el blog?

Cuando hayas elegido el estilo que quieres:

• Ingresa a tu cuenta de blogger y entra en tu blog
• Ve a Personalizar
• En Avanzado 
• Busca en lo ultimo Añadir CSS 
• Pega el código del botón que elegiste y guarda, 

Otra forma mas manual es:

• Ve Plantilla 
• Editar HTML 
• busca con CTRL+F ]]></b:skin> y pegalo justo arriba de este y guarda los cambios.

Con esto ya tenemos los estilos, ahora cada que quieras poner un botón en una de tus entradas solo coloca en la parte HTML que esta al lado de Redactar, este código

<a class="button" href="ENLACE QUE ABRIRÁ" rel="nofollow" target="_blank">TEXTO QUE MOSTRARA</a>

No olviden cambiar las variantes como el enlace que abre y el texto que muestra, para el ultimo botón sera un código diferente.

Botones estilo Inova

Que mejor manera de empezar que con este atractivo botón, este es el que yo uso en mi propio blog, es realmente bonito, para mi punto de vista:

Descargar Visitar Demo

.button {
    border-radius:4px;
    font-size:15px;
    margin:10px;
    color:#fff!important;
    display:inline-block;
    padding:10px 20px 10px 20px;
    background:#4299ef;
    box-shadow:0 15px 20px -10px rgba(0, 0, 0, 0), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), inset 0 -16px 25px 0 #3273b3;
    transition:all .3s ease-in-out
}
.button:hover {
    text-decoration:none;
    box-shadow:0 0 0 0 rgba(0, 0, 0, 0), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 10px 15px 5px #377dc3;
    color:#fff!important
}
.button:active {
    box-shadow:0 0 0 0 rgba(0, 0, 0, 0.2), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), inset 0 50px 25px 10px #22578b;
    color:#333!important;
    position:relative;
    top:1px;     
    transition:all .1s ease-in-out
}

Botón Boxil Que tal el nombre? Este es un lindo botón con un efecto de borde que aparece lateralmente al pasar el cursor por el, ademas de una difuminacion del botón al presionarlo.

Descargar Visitar Demo

.button {
    display:inline-block;
    font-size:15px;
    background:#fff;
    box-shadow:0 0 0 0 rgba(0, 0, 0, 0.2), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), inset 0 40px 25px 10px #ff5e66;
    color:#fff!important;
    margin:10px;
    padding:10px 25px 10px 25px;
    transition:all .3s ease-out
}
.button:hover {
    color:#797979!important;
    box-shadow:0 15px 20px -10px rgba(0, 0, 0, 0), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 0 0 5px #ff5e66
}
.button:active {
    color:#797979;
    box-shadow:0 15px 20px -10px rgba(0, 0, 0, 0), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 0 20px 5px #fff;
    transition:all .1s ease-out
}

Que mejor manera de empezar que con este atractivo botón Boxil 2, este es el que yo uso en mi propio blog, es realmente bonito, para mi punto de vista:

Descargar Visitar Demo

.button {
    border-radius:4px;
    font-size:15px;
    margin:15px;
    float:right;
    color:#797979!important;
    font-weight:bold;
    display:inline-block;
    padding:15px 25px 15px 25px;
    background:#fff;
    box-shadow:0 15px 20px -10px rgba(0, 0, 0, 0), inset 0 -3px 0 0 rgba(255, 94, 102, 0.7), inset 0 -0px 0 0 #ff5e66;
    transition:all .3s ease-in-out
}

.button:hover {
text-decoration:none;
    box-shadow:0 15px 20px -10px rgba(0, 0, 0, 0), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 0 0 5px #ff5e66;
    color:#797979!important;
}
.button:active {
    box-shadow:0 0 0 0 rgba(0, 0, 0, 0.2), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), inset 0 20px 25px 10px #ff5e66;
    background:#ff5e66;
    color:#fff!important;
    transition:all .1s ease-in-out
}

Boton w3schools remix, este atractivo botón sorprende con su hover que mueve el texto levemente a la izquierda mostrando una flecha seguidamente, ademas de sellar el trato con un efecto destello desde una esquina al presionar el botón .

Para este boton si tendras que usar un codigo diferente al inicial:

<button class="button" onclick="location.href='URL';" style="vertical-align: middle;"><span>TEXTO</span></button>

Y estos son los estilos:

.button {
    position: relative;
    background-color: #00468b;
    border: none;
    border-bottom: 2px solid #001f3f;
    font-size: 15px;
    color: #FFFFFF;
    padding: 15px;
    width: 170px;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
margin:10px;
}
.button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}
.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}

Botones css, botones para descargar, botones para el blog, botones tipo descarga para el blog, como poner botones en una pagina, como poner botones en blogger, como usar botones en un blog, colocar botones css en el blog, botones css con efectos, efectos hover para botones, botones para web