Skip to content

Instantly share code, notes, and snippets.

@ramin-ahmadi

ramin-ahmadi/CSS3 button hover effect no JavaScript!

Created August 1, 2017 12:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramin-ahmadi/610a02eed5c862d8e17955b4b7cfc0b8 to your computer and use it in GitHub Desktop.
Save ramin-ahmadi/610a02eed5c862d8e17955b4b7cfc0b8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS3 button hover effect no JavaScript!
<!DOCTYPE html>
<html>
<head>
<style>
.button{width:200px;height:60px;cursor:pointer;perspective:500px;-webkit-perspective:500px;}
.button .button-box{height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:0.25s;-webkit-transition:0.25s;}
.button:hover .button-box{transform:rotateX(-90deg);}
span{width:100%;height:100%;position:absolute;box-sizing:border-box;border:5px solid #fff;font-family:'Source Sans Pro',sans-serif;line-height:50px;font-size:17pt;text-align:center;text-transform:uppercase;}
span:nth-child(1){color:#fff;transform: translate3d(0, 0, 30px);-webkit-transform: translate3d(0, 0, 30px);}
span:nth-child(2){color:#1f887b;background:#fff;transform: rotateX(90deg) translate3d(0, 0, 30px);-webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);}
body{background:#1f887b;position:absolute;left:50%;top:50%;}
</style>
</head>
<body>
<div class="button">
<div class="button-box">
<span>Hover here</span>
<span>i'm flipping</span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment