Burger Buttom

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
    <p class="burger-button">
      <span class="burger-button-row"></span>
    </p>
  </div>
</div>
<div class="align grey">
  <div class="align-bis">
    <p class="burger-button radius">
      <span class="burger-button-row"></span>
    </p>    
  </div>
</div>
<div class="align">
  <div class="align-bis">
    <p class="burger-button is-cross">
      <span class="burger-button-row"></span>
    </p>    
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

$primary : #03A9F4;
$black : rgb(15,15,15);

$error : #ef5350;
$succes : #8BC34A;
$transition : all 0.4s ease-out;



* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.align{
  display: flex;
  &-bis{
    flex: 1;
    display:flex;
    justify-content: center;
    padding: 60px 0;
  }
  &.grey{
    background-color: rgb(245,245,245);
  }
}


// Components style
$this: '.burger-button';
$bar-margin: 10px;
$bar-height: 3px;
$bar-color: $black;
$bar-width: 30px;

#{$this} {
  position:relative;
  height: $bar-width;
  width: $bar-width;
  display: flex;
  background: rgb(230,230,230);
  
   
  &:hover, &:focus{
    cursor: pointer;
  }
  
 &-row{
    margin: auto;
    height: $bar-height;
    width: 100%;    
    background: $bar-color;
    position:relative;
    &:before, &:after{
      content:"";
      position:absolute;
      left:0;
      right: 0;
      height: $bar-height;
      background: $bar-color;
    }
    &:before{
      top: -($bar-margin);
    }
    &:after{
      bottom: -($bar-margin);
    }   
  }
  
  
    // Border radius
  &.radius{
    #{$this}{
      &-row{   
        &:after, &:before, &  {
          border-radius: ($bar-height / 2); 
        }
      }
    }
  }
  
}