html {
    height: 100%;
  }
  
  body {
    height: 100%;
    margin: 0;
    background: #162944;
  }
  
  .button_slide {
    color: #000000;
    border: 2px solid #c32d2d;
    border-radius: 0px;
    padding: 18px 36px;
    display: inline-block;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #c32d2d;
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
  }
  
  .slide_down:hover {
    box-shadow: inset 0 100px 0 0 #c32d2d;
  }
  
  .slide_right:hover {
    box-shadow: inset 400px 0 0 0 #c32d2d;
  }
  
  .slide_left:hover {
    box-shadow: inset 0 0 0 50px #c32d2d;
  }
  
  .slide_diagonal:hover {
    box-shadow: inset 400px 50px 0 0 #c32d2d;
  }
  
  #outer {
    width: 364px;
    margin: 50px auto 0 auto;
    text-align: center;
  }

  .button2{
    background:#c32d2d;
    color:#fff;
    border:none;
    position:relative;
    height:60px;
    font-size:1.6em;
    padding:0 2em;
    cursor:pointer;
    transition:800ms ease all;
    outline:none;
  }
  .button2:hover{
    background:#fff;
    color:#c32d2d;
  }
  .button2:before,button:after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    height:2px;
    width:0;
    background: #c32d2d;
    transition:400ms ease all;
  }
  .button2:after{
    right:inherit;
    top:inherit;
    left:0;
    bottom:0;
  }
  .button2:hover:before,.button2:hover:after{
    width:100%;
    transition:800ms ease all;
  }