CSS活动不返回正常状态

Question

有人知道为什么我的按钮在点击时没有恢复正常状态吗？点击激活活动样式，但不会在之后返回。

button,
    .button {
    display : inline-block;
    cursor : pointer;
    width : 200px;
    border-style : solid;
    border-width : 1px;
    border-radius : 50px;
    padding : 10px 18px;
    box-shadow : 0 1px 4px rgba(0,0,0,.6);
    font-size : 9.5pt;
    font-weight : bold;
    color : #fff;
    text-shadow : 0 1px 3px rgba(0,0,0,.4);
    font-family : sans-serif;
    text-decoration : none;
    }

    .button:active {
    padding: 8px 13px 6px;
	font-weight:normal;
    }

    button.green,
    .button.green {
    border-color: #8fc800;
    background: #8fc800;
    background: -moz-linear-gradient(top, #8fc800 0%, #438c00 100%);
    background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#8fc800), color-stop(100%,#438c00));
    background: -webkit-linear-gradient(top, #8fc800 0%,#438c00 100%);
    background: -o-linear-gradient(top, #8fc800 0%,#438c00 100%);
    background: -ms-linear-gradient(top, #8fc800 0%,#438c00 100%);
    background: linear-gradient(top, #8fc800 0%,#438c00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#8fc800', endColorstr='#438c00',GradientType=0 );
    }

   <div class="botBox">
    <a class="button green" href="#" onclick="TallySportsBottle()">Add</a>
    </div>