Background Gradient with Image

by Joe Saad

HTML

<button class="button">Save</button>

CSS

.button {
   border-top: 1px solid #ebffef;
   background: #c1ebd7;
   background-image: url('http://joesaad.net/images/logo.png'), -webkit-gradient(linear, left top, left bottom, from(#60c987), to(#c1ebd7));
   background-image: url('http://joesaad.net/images/logo.png'), -webkit-linear-gradient(top, #60c987, #c1ebd7);
    background-image: url('http://joesaad.net/images/logo.png'), linear-gradient(to bottom, #60c987, #c1ebd7);
    background-repeat:no-repeat;
    background-position: 100% 25%;

   padding: 35px 200px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #000000;
   font-size: 11px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #c3cfc7;
   background: #c3cfc7;
   color: #424242;
   }
.button:active {
   border-top-color: #d1d1d1;
   background: #d1d1d1;
   }