Comunidad de diseño web y desarrollo en internet

como hago una transición de botón hacia arriba?

Citar            
MensajeEscrito el 21 Abr 2017 02:00 pm
Hola estoy haciendo una transición para botón que al pasar el ratón por encima el botón se va hacia abajo, pero yo quisiera que se fuera hacia arriba pero no sé como se hace, creo que se hace con translate().

Código HTML :

<style>
  .btn7 {
  background: transparent;
    border: transparent;
    cursor: pointer;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
  .btn7:hover {
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -o-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
    transform: ;
  }
</style>
<html>
  <head>
      <script src='https://www.google.com/recaptcha/api.js'></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
     awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="animate.css">
     <link rel="stylesheet" href="transition.css">
  </head>
  <body>
<button class="btn7" onclick="location.href='form_modificar_fila.php'" title="modificar fila"><i class="fa fa-edit" style="font-size: 40px; color: #04B4AE;" data-test="holeOut"></i></button>
</body>


Gracias.

Por IVAN HEREDIA PLANAS

20 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 22 Abr 2017 06:24 am
Prueba con esto.

Código CSS :

  .btn7:hover {
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -o-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
    transform: ;
  }

Por jearj

41 de clabLevel



 

mozilla
Citar            
MensajeEscrito el 22 Abr 2017 11:33 am

jearj escribió:

Prueba con esto.

Código CSS :

  .btn7:hover {
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    -o-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
    transform: ;
  }


Ok, gracias lo probé y me fué muy bien ^^

Por IVAN HEREDIA PLANAS

20 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 22 Abr 2017 01:20 pm
Ha sido un placer

Por jearj

41 de clabLevel



 

mozilla

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.