给伪类设置z-index= -1;

.column{
    position: relative;
    float: left;
    padding: 30px 0;
    width: 25%;
    z-index: 0;
    background-color: orange;
    text-align: center;
}

.button:before,.button:after{
    content: '';
    position: absolute;
}

.button:before{
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    z-index:-1;
    border-radius: 9px;
}

.button.red:before{
    background: #d02e17;
    background-image: linear-gradient(to bottom, #b32511, #ffffff);

}

.button {
    display: inline-block;
    position: relative;
    height: 33px;
    line-height: 33px;
    background-image: linear-gradient(to bottom,#e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
    border: #000000 1px dotted;
    box-shadow: 0 2px 1px rgba(0,0,0,0.25);
}

　　其中将.button:before 的z-index = -1;是因为.button 和.button的伪类（新加的一个Box）为同一级的，而.button 默认为0,修改其中的z-index其实修改的是子元素的z-Index,所以无论怎样修改，.button中的元素也会在伪类的下面，因此只能修改伪类的z-index;  而将.column的z-index设为0，其实是postion为relative时，设置z-index，才会将其加入context-stack，