Hermoso botón de descarga y demostración en vivo con efecto CSS puro

Comparteme :

Increíble, elegante y hermoso botón de descarga y botón de demostración en vivo para tu blog de blogger. Toady Voy a compartir dos hermosas colecciones de botones para tu blog blogger, que también estoy usando en este blog.

Demostración en vivo y botón de descarga para blogger con efecto hover

Por qué este botón:
Lo que no hacemos para que nuestro blog se parezca a algo profesional. Siempre queremos atraer la atención de nuestros visitantes a través de la belleza y singularidad de nuestro blog. Por lo tanto, este botón realmente se ve hermosa y mejorar su belleza blog.
Debe ver: PR 0-8 Listas de Directorio de Aprobación Instantánea de 2015.
Y al comparar con otros el hecho principal de estos botones es; Este botón no utiliza ningún script externo o hoja de estilo css. Eso significa que no hará ningún efecto en el tiempo de carga de su blog.

Demo en vivo:
Ya puedes ver la imagen animada del botón de arriba. Pero después de eso realmente quieres ver la versión original de este botón ver más abajo.

Live Demo

Cómo integrar el CSS:
La adición de estos hermosos botones con increíble efecto hover es realmente mucho más fácil. Sólo tiene que agregar el código CSS en su plantilla sólo por una vez. La próxima vez sólo tendrá que llamar al efecto CSS con una clase div.

Paso 1: Inicie sesión en su cuenta de blogger, seleccione su blog y haga clic en el menú Plantilla de blogger y luego haga clic en Editar HTML

Nota:
Siempre tome una copia de seguridad de su plantilla de blogger antes de proceder a la edición.
Paso 2: Ahora busque: ]]></b:skin>
y justo encima de él pegue el código CSS a continuación:

<style type='text/css'>
*---download button css start---*/
.button {-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);background:url(&quot;#&quot;) repeat-x scroll 0 0 #252424;border-bottom:1px solid rgba(0, 0, 0, 0.25);color:#FFFFFF !important;cursor:pointer;font-weight:bold;line-height:1;overflow:visible;font-size:17px;padding:8px 19px 9px;position:relative;text-decoration:none;text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);width:auto;}.by-demobutton {background-color:#0b4290;text-align:center;width:150px;}.by-demobutton:hover {background-color:#00A0EE;}.by-downloadbutton {background-color:#bcf50b;text-align:center;width:150px;}.by-downloadbutton:hover {background-color:#00AC00;}.button:hover {-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);}
/*---download button css end---*/
  </style>

Paso 3: Hora de pulsar el botón Guardar plantilla.

Agregar el botón en el post de la publicación:

<a class="by-downloadbutton button" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: right;" target="_blank"><span style="display: inline-block;">Download</span></a>

Para descargar, utilice el siguiente código:

Para el botón Live-Demo, utilice el siguiente código:

<a class="by-demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: right;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>

Paso 3: Finalmente publica tu entrada en el blog y ve la magia en la vista previa en vivo.

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Hermoso botón de descarga y demostración en vivo con efecto CSS puro.

Comparte