Skip to content

Instantly share code, notes, and snippets.

@kyaido

kyaido/hamburger-button.html

Last active August 29, 2015 14:06
Show Gist options
  • Save kyaido/f26785385eb1287feb1d to your computer and use it in GitHub Desktop.
Save kyaido/f26785385eb1287feb1d to your computer and use it in GitHub Desktop.
Download ZIP
hamburger button
Raw
hamburger-button.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>hamburger</title>
<style>
/* http://hail2u.net/blog/webdesign/equal-to-cross.html */
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.hamburger {
position: absolute;
top: 50%;
left: 50%;
width: 8rem;
height: 8rem;
margin-top: -4rem;
margin-left: -4rem;
background-color: gray;
}
.hamburger .bar {
content: "";
display: block;
position: absolute;
left: 25%;
width: 50%;
height: 6%;
background-color: #333;
box-sizing: border-box;
transition: all 0.8s ease-in-out;
}
.hamburger .middle {
top: 46%;
}
.hamburger .top {
top: 30%;
}
.hamburger .bottom {
top: 64%;
}
.hamburger:hover .middle {
opacity: 0;
}
.hamburger:hover .top,
.hamburger:hover .bottom {
top: 47%;
}
.hamburger:hover .top {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.hamburger:hover .bottom {
-webkit-transform: rotate(-315deg);
transform: rotate(-315deg);
}
</style>
</head>
<body>
<div class="hamburger">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment