CSS
.btn1, .btn2{
width:30px;
height: 29px;
line-height: 29px;
cursor: pointer;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: inset 0 0 1px rgba(255,255,255,.9);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.9);
-webkit-box-shadow: inset 0 0 1px rgba(255,255,255,.9);
background-image: url('../img/msg_arrow.png') scroll 0 0 no-repeat, -webkit-linear-gradient(bottom, #000000, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 49%, rgba(72,72,72,.12) 50%, rgba(247,245,245,.12));
background-image: url('../img/msg_arrow.png') scroll 0 0 no-repeat, -moz-linear-gradient(bottom, #000000, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 49%, rgba(72,72,72,.12) 50%, rgba(247,245,245,.12));
background-image: url('../img/msg_arrow.png') scroll 0 0 no-repeat, -o-linear-gradient(bottom, #000000, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 49%, rgba(72,72,72,.12) 50%, rgba(247,245,245,.12));
background-image: url('../img/msg_arrow.png') scroll 0 0 no-repeat, -ms-linear-gradient(bottom, #000000, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 49%, rgba(72,72,72,.12) 50%, rgba(247,245,245,.12));
background-image: url('../img/msg_arrow.png') scroll 0 0 no-repeat, linear-gradient(bottom, #000000, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 49%, rgba(72,72,72,.12) 50%, rgba(247,245,245,.12));
}
.btn2:hover {
filter: none !important;
background: #000 !important;
}
.btn1:hover {
background: rgb(244,140,65); /* Old browsers */
background: -moz-linear-gradient(top, rgba(244,140,65,1) 0%, rgba(218,112,35,1) 55%, rgba(211,88,0,1) 56%, rgba(211,88,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,140,65,1)), color-stop(55%,rgba(218,112,35,1)), color-stop(56%,rgba(211,88,0,1)), color-stop(100%,rgba(211,88,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(244,140,65,1) 0%,rgba(218,112,35,1) 55%,rgba(211,88,0,1) 56%,rgba(211,88,0,1) 100%);...