Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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