.button{
width: 55px;
height:30px;
line-height: 15px;
text-align: center;
font-weight: bold;
color: #fff;
font-size:12px;
border-radius: 3px;
position: relative;
overflow: hidden;
top:-4px;
}

.button.red{
border:1px solid #b42323;
background: -webkit-linear-gradient(top,#e20202,#b92929);
background: -moz-linear-gradient(top,#e20202,#b92929);
background: linear-gradient(top,#e20202,#b92929);
}

.button.rarrow,
.button.larrow{
overflow:visible;
}
.rarrow:after,	
.rarrow:before,
.larrow:after,	
.larrow:before{
position:absolute;
content: "";
display: block;
width: 21px;
height: 21px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
}

.larrow:after{
top: 3px;
left: -10px;
}
.red.larrow:after{
border-left:1px solid #b42323;
border-bottom:1px solid #b42323;
border-radius: 5px;
background:-webkit-linear-gradient(top left,#e20202,#B92929);
background:-moz-linear-gradient(top left,#e20202,#B92929);
background:linear-gradient(top left,#e20202,#B92929);
}
.red:hover{
background: -webkit-linear-gradient(top,#7C0A0A,#c83c3c);
background: -moz-linear-gradient(top,#7C0A0A,#c83c3c);
background: linear-gradient(top,#7C0A0A,#c83c3c);
}

.red.rarrow:hover:after,
.red.larrow:hover:after{
background:-webkit-linear-gradient(top left,#7C0A0A,#c83c3c);
background:-moz-linear-gradient(top left,#7C0A0A,#c83c3c);
background:linear-gradient(top left,#7C0A0A,#c83c3c);
}