Skip to content

Instantly share code, notes, and snippets.

@glifchits

glifchits/index.html

Last active August 29, 2015 14:10
Show Gist options
  • Save glifchits/3344af12020a04824770 to your computer and use it in GitHub Desktop.
Save glifchits/3344af12020a04824770 to your computer and use it in GitHub Desktop.
Download ZIP
Google Inbox button animation
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Inbox button animation</title>
<style>
.btn {
margin: 30px;
background-color: #db4437;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 2px 2px 7px -1px rgba(0, 0, 0, 0.5);
border: none;
outline: none;
transition: .2s cubic-bezier(.4,0,.2,1);
}
.btn:hover {
cursor: pointer;
box-shadow: 2px 4px 7px 0px rgba(0, 0, 0, 0.6);
}
.btn:active {
background-color: #C93B2E;
box-shadow: 1px 3px 7px 0px rgba(0, 0, 0, 0.6);
}
.btn .icon {
position: absolute;
margin-left: 15px;
margin-top: 15px;
top: 0;
left: 0;
width: 30px;
height: 30px;
background-size: contain;
transition: .2s cubic-bezier(.4,0,.2,1);
}
.btn .pen {
background-image: url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/bt_compose2_2x.png");
opacity: 0;
transform: rotate(125deg);
}
.btn .plus {
background-image: url("https://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/2x/bt_speed_dial_2x.png");
opacity: 1;
transform: rotate(0deg);
}
.btn:hover .pen {
opacity: 1;
transform: rotate(0deg);
}
.btn:hover .plus {
opacity: 0;
transform: rotate(-125deg);
}
</style>
</head>
<body>
<button class="btn">
<div class="icon pen"></div>
<div class="icon plus"></div>
</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment