Tema: Botones de YouTube CSS3.

Los botones de YouTube CSS3, lo puedes colocar en cualquier tipo de página que tengas y de temática, que le quieras dar un mejor aspecto y profesionalidad a tu sitio. Como está en la sección de Blogger, lo haré para los Bloggers.

Los botones de YouTube CSS3, son exactamente, como se ven en la imagen, que se puede apreciar más arriba.

El código CSS que tienes que colocar en el blog, para que funcione estos botones, es el siguiente:

Código:

#soywebmaster {
background: url("http://2.bp.blogspot.com/-k8j0QxpWR8c/UAVqTxMHNqI/AAAAAAAAFBs/AV5L070keK4/s400/boton-youtube-ajmrdesign.png");
margin: 0;
padding: 0;
height:30px;
line-height:30px;
width: 120px;
color:#ffffff;
font-size: 15px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
border-top: 1px solid #3c6c32;
border-left: 1px solid #3c6c32;
border-right: 1px solid #3c6c32;
border-bottom: 1px solid #000000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0px 0px 3px #cacaca;
-webkit-box-shadow: 0px 0px 3px #cacaca;
box-shadow: 0px 0px 3px #cacaca;
}
#soywebmaster:hover {
background: url("http://2.bp.blogspot.com/-k8j0QxpWR8c/UAVqTxMHNqI/AAAAAAAAFBs/AV5L070keK4/s400/boton-youtube-ajmrdesign.png") 0% 100%;
-moz-box-shadow: 0px 0px 3px #6b6969;
-webkit-box-shadow: 0px 0px 3px #6b6969;
box-shadow: 0px 0px 3px #6b6969;
}
#soywebmaster a, #soywebmaster a:hover {
color:#ffffff !important;
}

#soywebmaster2 {
background: url("http://2.bp.blogspot.com/-JlCaA50AxwI/UAVqTsjg3PI/AAAAAAAAFBg/yg5TYZII2TI/s400/boton2-youtube-ajmrdesign.png");
margin: 0;
padding: 0;
height:30px;
line-height:30px;
width: 120px;
color:#ffffff;
font-size: 15px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
border-top: 1px solid #0053a6;
border-left: 1px solid #0053a6;
border-right: 1px solid #0053a6;
border-bottom: 1px solid #000000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0px 0px 3px #cacaca;
-webkit-box-shadow: 0px 0px 3px #cacaca;
box-shadow: 0px 0px 3px #cacaca;
}
#soywebmaster2:hover {
background: url("http://2.bp.blogspot.com/-JlCaA50AxwI/UAVqTsjg3PI/AAAAAAAAFBg/yg5TYZII2TI/s400/boton2-youtube-ajmrdesign.png") 0% 100%;
-moz-box-shadow: 0px 0px 3px #6b6969;
-webkit-box-shadow: 0px 0px 3px #6b6969;
box-shadow: 0px 0px 3px #6b6969;
}
#soywebmaster2 a, #soywebmaster2 a:hover {
color:#ffffff !important;
}

Si eres muy, muy, principiante y no sabes donde colocar este código, sólo entra en la edición de HTML de tu blog, al cual le quieres agregar los botones de YouTube CSS3 y antes de ]]></b:skin> pegas el CSS mencionado anteriormente.

Cuando quieras y en donde quieras que aparezcan los botones debes de colocar lo siguiente:

Código HTML:

1.1 - Color verde - <div id="soywebmaster">Ejemplo de SoyWebmaster</div>

1.2 - Color azul - <div id="soywebmaster2">Ejemplo de SoyWebmaster</div>

Y cambias el texto que dice Ejemplo de SoyWebmaster, y colocas el texto que quieras que aparezca en el botón. Claramente puedes ver que el primer botón es de color Verde, osea el primer código sólo es para colocar el botón Verde, y el segundo para colocar el color azul.

Saludos amigos y espero que les sirva este pequeño Tutorial de Botones de YouTube CSS3.

Una vez más, darte las gracias por este gran aporte. Muy interesante.

Iniciado por pedrosocialmedia

Una vez más, darte las gracias por este gran aporte. Muy interesante.

Gracias a ti hermano, a mí me gusta también el aporte, son excelentes los botones.