AjMrDeSiGn

Templates Blogger, exquisitez para usuarios curiosos.

Botones movie youtube css3

17 jul. 2012

Ejemplo escritos de botones movie youtube css3, 2 botones, con un color verde y azul, para copiar y pegar en nuestro blog, la forma de implantarlo es añadiendo este código html de abajo para añadir un enlace.

Ejemplo




Código html

1.1 - Color verde - <div id="bv-ajmrdesign">Ejemplo</div>

1.2 - Color azul - <div id="ba-ajmrdesign">Ejemplo</div>

Código css

#bv-ajmrdesign {
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;
}
#bv-ajmrdesign: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;
}
#bv-ajmrdesign a, #bv-ajmrdesign a:hover {
color:#ffffff !important;
}

#ba-ajmrdesign {
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;
}
#ba-ajmrdesign: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;
}
#ba-ajmrdesign a, #ba-ajmrdesign a:hover {
color:#ffffff !important;
}


No hay comentarios:

Normas comentarios › Leer antes de comentar...

« »

Suscríbete a nuestro feed...