Move Left Bottom Hover Effect

Move Left Bottom

What you need to know:

  • Tag or class? - if you want to use class name then just replace 'button' in css with your class (.class).
  • How to change left or bottom position? - Just increase or decrease numbers in "translate(-10px,10px)"
  • How to speed up or slow down hover? - In transition you have time (.3s), increase or decrease that number if you want to change it. If your time is less then 1s then you dont need to use 0, if its bigger, then just write "1.5s" or anything you need.
  • Can i change button look ? - Of course, that styles are basics styles, everything in 'button' can be replaced.
  • Is it work on all browsers ? - It should, but if you found any problems, just please report them to me.
  • I need webkits ? - If you are using Sass with auto prefixer then no, If you dont use Sass then i suggest to have them, because of older browsers.

HTML

<button>csshover.com</button>

CSS


button {
font-size: 15px;
padding: 12px 24px;
border-radius: 3px;
background-color: #fff;
}
button:hover {
-webkit-transform: translateY(-10px,10px);
-ms-transform: translateY(-10px,10px);
transform: translateY(-10px,10px);
-webkit-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

Leave a Reply