Hamburger button effects – Part 2

Hamburger navigation bar 2

Some time ago, I wrote an article on hamburger button. 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.

In this demo, I’m going to target the child elements with the help of :nth-child() 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 or id. and also I’m going to use a CSS3 transition property for a smooth transition.

let’s dig the code

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 pseudo-element to target each and every child elements.

  1. First, consider a div element with class:hamburger1 and inside the parent div element, consider a three more div elements without class or id.
  2. Now style the parent div element with class:hamburger1 by setting the background color, width, padding, and margin.
    .hamburger1{
      background: #49b293;
      width: 55px;
      padding: 25px;
      float: left;
      margin: 70px;
      cursor: pointer;
    }
    
  3. Now style the child div elements by setting its width, height,  background color and margin
    .hamburger1 div{
      height: 5px;
      background: #fff;
      width: 55px;
      margin: 5px 0px;
      transition: all 0.5s;
    }
    

Above basic stylings will be same for all Hamburger button effects, just we need to change the parent div elements class that’s it.

Hamburger navigation bar 2

In this effect, whenever a visitor hovers over the button, resize in the width of the child elements should occur. for achieving this effect I’m going to target all child elements using nth-child pseudo-element.

.hamburger1:hover div:nth-child(1) {
  width: 20px;
  transition: all 0.5s;
}

.hamburger1:hover div:nth-child(2) {
  width: 35px;
  transition: all 0.5s;
}

.hamburger1:hover div:nth-child(3) {
  width: 50px;
  transition: all 0.5s;
}

Hamburger navigation bar 2

In this effect, whenever a visitor hovers over the button, all three child div elements should rotate to 90 degrees. for achieving this effect, I’m going to use the CSS3 translate and rotate methods with the help of transform property.

.hamburger2:hover div:nth-child(1) {
  transform: translate(15px, 10px) rotate(90deg);
  transition: all 0.5s;
}

.hamburger2:hover div:nth-child(2) {
  transform: rotate(90deg);
  transition: all 0.5s;
}

.hamburger2:hover div:nth-child(3) {
  transform: translate(-15px, -10px) rotate(90deg);
  transition: all 0.5s;
}

Hamburger navigation bar 2

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 with the help of transform property.

.hamburger3:hover div:nth-child(1) {
  transform: translate(0px, 10px);
  transition: all 0.5s;
}

.hamburger3:hover div:nth-child(3) {
  transform: translate(0px, -10px);
  transition: all 0.5s;
}

Hamburger navigation bar 2

In this effect, whenever a visitor hovers over the button, all three child div elements should form a plus symbol. for achieving this effect, I’m going to use the CSS3 translate and rotate methods with the help of transform property.

.hamburger4:hover div:nth-child(1) {
  transform: translate(0px, 10px) rotate(0deg);
  transition: all 0.5s;
}

.hamburger4:hover div:nth-child(2) {
  transform: rotate(90deg);
  transition: all 0.5s;
}

.hamburger4:hover div:nth-child(3) {
  transform: translate(0px, -10px) rotate(0deg);
  transition: all 0.5s;
}

Hamburger navigation bar 2

In this effect, whenever a visitor hovers over the button, all three child div elements should form a Not equal to symbol. for achieving this effect, I’m going to use the CSS3 translate and rotate methods with the help of transform property.

.hamburger5:hover div:nth-child(1) {
  transform: translate(0px, 5px) rotate(0deg);
  transition: all 0.5s;
}

.hamburger5:hover div:nth-child(2) {
  transform: rotate(45deg);
  transition: all 0.5s;
}

.hamburger5:hover div:nth-child(3) {
  transform: translate(0px, -5px) rotate(0deg);
  transition: all 0.5s;
}

Hamburger navigation bar 2

In this effect, whenever a visitor hovers over the button, all three child div elements should form an Inverted Not equal to symbol. for achieving this effect, I’m going to use the CSS3 translate and rotate methods with the help of transform property.

.hamburger6:hover div:nth-child(1) {
  transform: translate(0px, 5px) rotate(0deg);
  transition: all 0.5s;
}

.hamburger6:hover div:nth-child(2) {
  transform: rotate(-45deg);
  transition: all 0.5s;
}

.hamburger6:hover div:nth-child(3) {
  transform: translate(0px, -5px) rotate(0deg);
  transition: all 0.5s;
}

Hamburger navigation bar 2

In this effect, whenever a visitor hovers over the button, all three child div elements should form an Inverted V symbol. for achieving this effect, I’m going to use the CSS3 translate and rotate methods with the help of transform property.

.hamburger7:hover div:nth-child(1) {
  width:40px;
  transform: translate(-5px, 10px) rotate(-50deg);
  transition: all 0.5s;
}

.hamburger7:hover div:nth-child(2) {
  opacity:0;
  transition: all 0.5s;
}

.hamburger7:hover div:nth-child(3) {
  width:40px;
  transform: translate(18px, -10px) rotate(50deg);
  transition: all 0.5s;
}

Hamburger navigation bar 2

In this effect, whenever a visitor hovers over the button, all three child div elements should form a V symbol. for achieving this effect, I’m going to use the CSS3 translate and rotate methods with the help of transform property.

.hamburger8:hover div:nth-child(1) {
  width:40px;
  transform: translate(-5px, 10px) rotate(50deg);
  transition: all 0.5s;
}

.hamburger8:hover div:nth-child(2) {
  opacity:0;
  transition: all 0.5s;
}

.hamburger8:hover div:nth-child(3) {
  width:40px;
  transform: translate(18px, -10px) rotate(-50deg);
  transition: all 0.5s;
}

check out the demo

See the Pen Hamburger button part – 2 by rajeshdn (@cool_lazyboy) on CodePen.0

Rajesh DN
Latest posts by Rajesh DN (see all)
5 1 vote
Article Rating
Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Omelian Ecaterina
Omelian Ecaterina
5 years ago

I am a very very very beginner, and I’d love to use the second hamburger, what should I do for using it in my WPress site?
Thanx

Ali Musa
2 years ago

Hi:

Thank you very much, this great job done professionally and help very much.