Las maravillas que se pueden hacer hoy en dia con CSS3 son muchas y muy variadas. Como este boton ideal para poner descargas con una fantastica animacion. Y como dicen que para muestra un boton, aqui debajo lo tienes para que veas como queda. Pulsa sobre el y pruebalo.
Para ponerlo en tu blog o web, primero tienes que añadir los estilos CSS en tu plantilla y guardar.
<style>
.bdescargar {
-moz-transition: all 0.5s ease-in-out 0s;
background-color: #F4F5FE;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4) inset, 0 0 0 4px rgba(255, 255, 255, 0.1);
display: block;
margin: 10px;
overflow: hidden;
padding: 10px 15px;
position: relative;
text-decoration: none;
width: 160px;
}
.bdescargar .icon {
-moz-transition: all 0.5s ease-in-out 0s;
background: url("http://uploads.boxify.me/60797/download.png") no-repeat scroll left top transparent;
float: left;
height: 32px;
width: 45px;
}
.bdescargar .title {
color: #000000;
display: block;
float: left;
font-size: 18px;
font-weight: bold;
line-height: 32px;
}
.bdescargar .icon2 {
background: url("http://uploads.boxify.me/60798/download2.png") no-repeat scroll left top transparent;
height: 32px;
left: 20px;
opacity: 0;
position: absolute;
top: -15px;
width: 32px;
}
.bdescargar:hover {
-moz-transition-delay: 0.5s;
background-color: #E3E3FF;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset, 0 0 0 4px rgba(51, 51, 204, 0.5);
}
.bdescargar:hover .icon {
-moz-transform: rotate(-90deg) scale(0.8);
}
.bdescargar:active .icon {
opacity: 0;
}
.bdescargar:active .icon2 {
-moz-animation: 1s linear 0s normal none infinite slideDown1;
opacity: 1;
}
.bdescargar:active {
background-color: #C1C1FF;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 0 0 4px rgba(51, 51, 204, 0.8);
}
@keyframes slideDown1{
0% {
top: -30px;
}
100% {
top: 55px;
}
}
@-webkit-keyframes slideDown1{
0% {
top: -30px;
}
100% {
top: 55px;
}
}
@-moz-keyframes slideDown1{
0% {
top: -30px;
}
100% {
top: 55px;
}
}
</style>
Ahora, cada vez que queramos mostrar el boton, añadimos este codigo, poniendo la url de la descarga donde esta indicado en rojo.
<a class="bdescargar" href="URL"><span class="icon"></span><span class="title">Descargar</span><span class="icon2"></span></a>
|
