CSS3 button hover effect no JavaScript!


today I’m gonna introduce a very cool CSS3 hover effect. I have been dealing with hover effect for all kinds of elements and this one is one my favorites because it’s purely CSS effect and doesn’t require JavaScript. all you need is to copy the following code inside body tag:

<div class="button"> 
  <div class="button-box"> 
    <span>Hover here</span> 
    <span>i'm flipping</span> 
  </div> 
</div>
which give you the layout for the button. next step to create styles for this button. very first thing we need is to define a shape for the button.
.button{width:200px;height:60px;cursor:pointer;perspective:500px;-webkit-perspective:500px;}
I’m using a css property called  “perspective” which defines how many pixels a 3D element is placed from the view. I need that to create a flipping hover effect. then I’m adding the hover effect:
.button:hover .button-box{transform:rotateX(-90deg);}
 you can find the final code here at my GitHubGist page
Enjoy
Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 0

Your email address will not be published. Required fields are marked *

CSS3 button hover effect no JavaScript!

log in

Captcha!

reset password

Back to
log in
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format