rotate from right Hover Effect

Rotate From Right

What you need to know:

  • How to speed up or slow down hover? - In transition you have time (.2s), 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 'You can change it' 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 class="bg-hvr9">csshover.com</button>

CSS


.bg-hvr9 {
/*You can change it*/
color: #fff;
padding: 20px;
font-size: 22px;
border: 2px solid #fff;
/*You Should leave that*/
cursor: pointer;
position: relative;
background-color: transparent;
overflow: hidden;
}
.bg-hvr9::before {
content: '';
width: 0;
height: 200%;
right: 0;
bottom: 0;
-webkit-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
transition: .2s ease-in-out;
position: absolute;
background-color: #2ECC71;
z-index: -1;
}
.bg-hvr9:hover::before {
width: 100%;
transform: rotate(180deg);
}

This Post Has 5 Comments

  1. Hi. I see that you don’t update your page too often. I know that writing
    articles is boring and time consuming. But did you know that there is a tool that allows you to create new articles using existing content (from article directories or
    other blogs from your niche)? And it does it very well.

  2. Bardzo ciekawy artykuł. Dodałem go do moich zakladek
    na pewno tu wroce.

  3. I’m not that much of a online reader to be honest
    but your blogs really nice, keep it up! I’ll go ahead and bookmark your site to come back down the
    road. Cheers

  4. Hello. I have checked your csshover.com and i see you’ve got some duplicate content so probably it is
    the reason that you don’t rank high in google. But you can fix
    this issue fast. There is a tool that generates content like human, just search in google:
    miftolo’s tools

Leave a Reply