Site icon Coding is Love

Hamburger button effects – Part 2

Rajesh DN

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.

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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

Exit mobile version