¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Boton de Descarga Css
#1
0
Hola gente hoy les traigo esto botón que me encontré y me encanto por eso decidí compartirlo con ustedes No es divertido


[Imagen: 5Y8AHQ0.png][Imagen: NhjCw9G.png][Imagen: cgg9JhA.png]

CSS
Código:
.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;

  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
   -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

        background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
        background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px;
  margin: -50px 0 0 10px;
  
                                                    
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
  

  position: absolute;
  z-index: -1;
  

  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

.button a, p {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);      
}

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}

.button:hover .bottom {
  margin: -10px 0 0 10px;
}

.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

.button:active .bottom {
  margin: -20px 0 0 10px;
}

.button:active .top {
  margin: -70px 0 0 10px;
}

Html
Código:
<div class="button">
<a href="#">Descargar</a>
<p class="top">Clic para</p>
<p class="bottom">7.2TB .rar</p>
</div>


Que lo Disfruten SonrisaSonrisa

#2
0
Muy pero muy buenooo!!! Se agradeceee Sonreir
Reglas de LagriHost | WIKI/Ayuda-FAQ | Nuestro Equipo | Solicita tu Hosting en 7 Pasos
No doy soporte por MP! Para eso esta el foro Guiño


[Imagen: banner-colabora.gif][Imagen: 8mt2wBp.jpg]

#3
0
Me lo llevo compañero!!!!! Gracias por compartirlo.

#4
0
(01-04-2014, 06:48 PM)Kevinex escribió: Muy pero muy buenooo!!! Se agradeceee Sonreir

(01-04-2014, 06:49 PM)loko714 escribió: Me lo llevo compañero!!!!! Gracias por compartirlo.

Que lo disfruten ^^ Guiño

#5
0
(01-04-2014, 09:43 PM)Sorss escribió: Excelente a mi las cosas así me dan muchas ideas, está buenísimo lo descargaré para tenerlo algún día le daré un uso.

Genial bro, gracias por pasar. Pulgar para arriba

#6
0
Sin dudarlo me lo re llevo!! Esta muy buenoooooooo... lo utilizare Sonreir gracias

#7
0
esta buenisimo, el efecto hover, esta bien compuesto y con una buena semantica. solo que esta demasiadas lineas de codigo para un boton.
(y) buena suete



Posibles temas similares…
Tema Autor Respuestas Vistas Último mensaje
  Tutorial Limpiar estilos no usados de tu CSS para liberar espacio Diringax 0 1,030 17-02-2017, 10:31 AM
Último mensaje: Diringax
  Cargamos los estilos css desde un archivo externo torgar22 0 1,090 23-10-2015, 06:44 PM
Último mensaje: torgar22
  Formato de los enlaces con css torgar22 0 1,242 23-10-2015, 06:42 PM
Último mensaje: torgar22
  Botón Colorido torgar22 2 1,464 09-07-2015, 09:58 PM
Último mensaje: AndresXZ09
  Botón animado torgar22 1 1,032 18-06-2015, 11:23 PM
Último mensaje: Samo30



Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018