.button-new-orange {   
  padding: 12px 5px;   
  box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.5);   
  line-height: 1.25;   
  background: #ff860a;   
  text-decoration: none;   
  color: white;   
  font-size: 16px;   
  letter-spacing: .08em;   
  text-transform: uppercase;   
  position: relative;   
  transition: background-color .6s ease;   
  overflow: hidden;  
   border-radius: 10px;
   width: 100%;
   text-align: center;
  &:after {     
    content: "";     
    position: absolute;     
    width: 0;     
    height: 0;     
    top: 50%;     
    left: 50%;     
    transform-style: flat;     
    transform: translate3d(-50%,-50%,0);     
    background: #ff860a;     
    border-radius: 100%;     
    transition: width .3s ease, 
    height .3s ease;  

  }   
  &:focus,   
  &:hover {       
    background:#ff860a);   
  }   
  &:active {     
    &:after {       
      width: 200px;       
      height: 200px;     
    }   
  } 
}

.button-new-green {   
  padding: 12px 5px;   
  box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.5);   
  line-height: 1.25;   
  background: #54b847;   
  text-decoration: none;   
  color: white;   
  font-size: 16px;   
  letter-spacing: .08em;   
  text-transform: uppercase;   
  position: relative;   
  transition: background-color .6s ease;   
  overflow: hidden;  
   border-radius: 10px;
          width: 100%;
   text-align: center;
  &:after {     
    content: "";     
    position: absolute;     
    width: 0;     
    height: 0;     
    top: 50%;     
    left: 50%;     
    transform-style: flat;     
    transform: translate3d(-50%,-50%,0);     
    background: #a8edae;     
    border-radius: 100%;     
    transition: width .3s ease, 
    height .3s ease;   
  }   
  &:focus,   
  &:hover {       
    background:#a8edae;   
  }   
  &:active {     
    &:after {       
      width: 200px;       
      height: 200px;     
    }   
  } 
}