hamburger button<\/a>. where I’ve shown how to create a very basic and simple hamburger button effect. In this article, I’m going to show you guys how to create a few different kinds of Hamburger button effects. Just have a look at the above Image, so here we are going to explore these different kinds of Hamburger button effects in this article.
\n<\/p>\nIn this demo, I’m going to target the child elements with the help of :nth-child()<\/code> pseudo-element. So that It would be very easy for us to target each and every child elements inside the parent element without using class<\/code> or id<\/code>. and also I’m going to use a CSS3 transition<\/code> property for a smooth transition.<\/p>\nlet’s dig the code<\/h3>\n
Here I’m going to show eight different kinds of Hamburger button effects. So the markup and CSS stylings will be similar for all eight Hamburger button effects, but for achieving different effects, As I mentioned above I’m going to use :nth-child<\/code> pseudo-element to target each and every child elements.<\/p>\n\n- First, consider a div element with
class:hamburger1<\/code> and inside the parent div element, consider a three more div elements without class or <\/code>id.<\/li>\n- Now style the parent div element with
class:hamburger1<\/code> by setting the background color, width, padding, and margin.\n.hamburger1{\n background: #49b293;\n width: 55px;\n padding: 25px;\n float: left;\n margin: 70px;\n cursor: pointer;\n}\n<\/pre>\n<\/li>\n- Now style the child div elements by setting its width, height, background color and margin\n
.hamburger1 div{\n height: 5px;\n background: #fff;\n width: 55px;\n margin: 5px 0px;\n transition: all 0.5s;\n}\n<\/pre>\n<\/li>\n<\/ol>\nAbove basic stylings will be same for all Hamburger button effects, just we need to change the parent div elements class<\/code> that’s it.<\/p>\n![\"Hamburger](\"https:\/\/i.imgur.com\/0rxkWXk.jpg\")
<\/p>\n
In this effect, whenever a visitor hovers over the button, resize<\/strong> in the width<\/strong> of the child elements should occur. for achieving this effect I’m going to target all child elements using nth-child<\/code> pseudo-element.<\/p>\n.hamburger1:hover div:nth-child(1) {\n width: 20px;\n transition: all 0.5s;\n}\n\n.hamburger1:hover div:nth-child(2) {\n width: 35px;\n transition: all 0.5s;\n}\n\n.hamburger1:hover div:nth-child(3) {\n width: 50px;\n transition: all 0.5s;\n}<\/pre>\n![\"Hamburger](\"https:\/\/i.imgur.com\/cNVsbqT.jpg\")
<\/p>\n
In this effect, whenever a visitor hovers over the button, all three child div elements should rotate<\/strong> to 90 degrees<\/strong>. for achieving this effect, I’m going to use the CSS3 translate<\/strong> and rotate methods<\/strong> with the help of transform property.<\/p>\n.hamburger2:hover div:nth-child(1) {\n transform: translate(15px, 10px) rotate(90deg);\n transition: all 0.5s;\n}\n\n.hamburger2:hover div:nth-child(2) {\n transform: rotate(90deg);\n transition: all 0.5s;\n}\n\n.hamburger2:hover div:nth-child(3) {\n transform: translate(-15px, -10px) rotate(90deg);\n transition: all 0.5s;\n}<\/pre>\n![\"Hamburger](\"https:\/\/i.imgur.com\/oJKm3R9.jpg\")
<\/p>\n
In this effect, whenever a visitor hovers over the button, first and last child div elements should combine with second child element. for achieving this effect, I’m going to use the CSS3 translate method<\/strong> with the help of transform property.<\/p>\n.hamburger3:hover div:nth-child(1) {\n transform: translate(0px, 10px);\n transition: all 0.5s;\n}\n\n.hamburger3:hover div:nth-child(3) {\n transform: translate(0px, -10px);\n transition: all 0.5s;\n}<\/pre>\n\r\n
![\"Hamburger](\"https:\/\/i.imgur.com\/5zwTX76.jpg\")
<\/p>\n