html{
  background-color:#fff;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  padding:1vw;
}


.buttonBox{
  position:relative;
  float:left;
  width:15%; 
  background: #ff9900;
}


button{
  width:100%;
  height:40px;
  position:relative;
  background:rgba(255, 255, 255, .1);
  text-transform:uppercase;
  color:#333;
  font-weight:700;
  letter-spacing:1px;
  border:none;
  font-size:15px;
  outline:none;
}


/* FIRST BUTTON */

.border{
    position:absolute;
    background:none;
    transition:all .5s ease-in-out;
}

#sixth{
  overflow:hidden;
}

#sixth>button{
  z-index:1;
  transition:color .5s ease;
}

#sixth .border{
  z-index:0;
  background:white;
  width:30px;
  height:30px;
  transform:rotate(45deg);
}

#sixth>.border:nth-of-type(1){
  top:-35px;
  left:-30px; 
}

#sixth>.border:nth-of-type(2){
  top:-35px;
  right:-30px;
}

#sixth>.border:nth-of-type(3){
  bottom:-35px;
  left:-30px;
}

#sixth>.border:nth-of-type(4){
  bottom:-35px;
  right:-30px;
}

#sixth:hover .border{
  transform:scale(15.7) rotate(45deg);
}

#sixth:hover button{
  color:#ff9292;
  transition:color 2s ease;
}


