Collapsed expanded menu button navbar menu button custom

gistfile1.txt

<button type="button" class="navbar-toggle collapsed">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

.navbar-toggle {
	outline: none;
	width: 30px;
	height: 50px;
	background-color: transparent;
	border: none;
	padding: 0;
	position: relative;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1),
.navbar-toggle.collapsed .icon-bar:nth-of-type(3){
  transform: none;
  -ms-transform: none;
  -webkit-transform: none;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(1){
	top: 0px;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(2){
	opacity: .6;
	top: 10px;
}
.navbar-toggle.collapsed .icon-bar:nth-of-type(3){
	top: 20px;
}
.navbar-toggle .icon-bar{
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #fff;
	opacity: .6;
	transition: all 500ms ease-in-out;
}
.navbar-toggle .icon-bar:nth-of-type(1){
	top: 8px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.navbar-toggle .icon-bar:nth-of-type(2){
	opacity: 0;
	top: 10px;
}
.navbar-toggle .icon-bar:nth-of-type(3){
	top: 8px;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}