.sidebutton {
height:99px;
width: 234px;
display:block;
position: relative;
margin-bottom: 15px;
/* -webkit-box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5); */
-moz-box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
}

.banner {
width:75px;
height:35px;
display: block;
position:absolute;
left: 0;
bottom: 5px;
transition:0.7s;
}
.title {
width: auto;
position: absolute;
padding-left:15px;
padding-top:2px;
padding-bottom:2px;
color: #C9C9C9;
font-size: 1.5em;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 2px;
text-shadow: 0 0 5px #000;
line-height: 140%;
text-transform: uppercase;
z-index: 3;
transition:0.5s;
}
.blur {
width: 100%;
height: 35px;
position: absolute;
z-index: 1;
overflow: hidden;

-webkit-border-radius: 0px 15px 35px 0px;
border-radius: 0px 15px 35px 0px;

-webkit-filter: blur(2px);
filter: blur(2px);
transition: background-position 0.1s linear 0s;
}

.cover {

width: 140%;
height: 35px;
position: absolute;
z-index: 2;
overflow: hidden;

background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(85%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 100%);
background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 );
}

.sidebutton:hover .banner {
/* width:225px; */
}

.sidebutton:hover .title {
padding-left:50px;
color:#FFA800;;
text-shadow: 0 0 5px #999;

}