Ver Mensaje Individual
  #2 (permalink)  
Antiguo 21/05/2012, 05:08
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 1 mes
Puntos: 192
Respuesta: Boton DIV / CSS desplegable.

¿Algo así?

Código CSS:
Ver original
  1. .button{
  2.     /* Debe tener especificadas las dimensiones
  3.     para poder animarlas */
  4.     width: 100px;
  5.     height: 50px;
  6.    
  7.     background: url(http://placekitten.com/100/100) center center no-repeat;
  8.     cursor: pointer;
  9.    
  10.     /* Definir transiciones */
  11.      -webkit-transition-property:height, line-height;  
  12.      -webkit-transition-duration: 0.3s;  
  13.      -webkit-transition-timing-function: linear;
  14.        
  15.      -moz-transition-property:height, line-height;  
  16.      -moz-transition-duration: 0.3s;  
  17.      -moz-transition-timing-function: linear;
  18.      
  19.      transition-property:height, line-height;  
  20.      transition-duration: 0.3s;  
  21.      transition-timing-function: linear;
  22.    
  23.     /* Estilos adicionales */
  24.     color:#FFF;
  25.     font-size: 22px;
  26.     font-family: Helvetica, Arial, sans-serif;
  27.     line-height: 50px; /* Igual que la altura para centrar verticalmente */
  28.     text-align: center;
  29.     border-radius: 6px;
  30.     box-shadow: 1px 1px 6px rgba(0,0,0,0.5);
  31.     border: 1px solid #EEE;
  32. }
  33.  
  34. .button:hover{
  35.     height: 80px;
  36.     line-height: 80px;
  37. }

Código HTML:
Ver original
  1. <div class="button">
  2.     Botón
  3. </div>
__________________
nahueljose.com.ar