This button was created for a web application but it was cut before the site went to production. I really liked the button so I decided to work it up anyway and see what I could create.

The Button

see the button in action /// view the dabblet

I was able to create this one with just one element (booyah). Just some creative box shadows and pseudo elements.

An outline of the design elements:

• the gradient is created with the background
• box shadows create the outer drop shadow and the outside white border
• the inner green border is just that; a border
• the computer is the pseudo element ::before
• and finally the right arrow is created with the ::after pseudo element

When the button is hovered we simply flip the gradient.

HTML

<a href='#'>Upload images from your computer</a>

CSS

a {
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.4))), -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #6d8a18), color-stop(100%, #6d8a18));
  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)), -webkit-linear-gradient(bottom, #6d8a18, #6d8a18);
  background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)), -moz-linear-gradient(bottom, #6d8a18, #6d8a18);
  background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)), -o-linear-gradient(bottom, #6d8a18, #6d8a18);
  background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)), -ms-linear-gradient(bottom, #6d8a18, #6d8a18);
  background: linear-gradient(bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)), linear-gradient(bottom, #6d8a18, #6d8a18);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  border: 4px solid #6d8a18;
  -moz-box-shadow: #f0f0f0 0 0 0 4px, #666666 0 1px 6px 4px;
  -webkit-box-shadow: #f0f0f0 0 0 0 4px, #666666 0 1px 6px 4px;
  -o-box-shadow: #f0f0f0 0 0 0 4px, #666666 0 1px 6px 4px;
  box-shadow: #f0f0f0 0 0 0 4px, #666666 0 1px 6px 4px;
  color: white;
  display: inline-block;
  font-family: Helvetica Neue;
  font-size: 15px;
  font-weight: 100;
  height: 32px;
  /* Margin is simply for display purposes */
  margin: 100px 180px 0;
  padding: 12px 20px 12px 52px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: 166px;
}

  a::before {
    background-image: /* computer image here */;
    content: "";
    display: block;
    height: 37px;
    margin-top: -17px;
    position: absolute;
    left: 4px;
    top: 50%;
    width: 51px;
  }

  a::after {
    border-top: 10px solid transparent;
    border-left: 10px solid white;
    border-bottom: 10px solid transparent;
    content: "";
    display: block;
    height: 0;
    margin-top: -9px;
    position: absolute;
    right: 8px;
    top: 50%;
    width: 0;
  }

  a:hover {
    background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(255, 255, 255, 0.4)), color-stop(100%, rgba(255, 255, 255, 0))), -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #6d8a18), color-stop(100%, #6d8a18));
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)), -webkit-linear-gradient(bottom, #6d8a18, #6d8a18);
    background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)), -moz-linear-gradient(bottom, #6d8a18, #6d8a18);
    background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)), -o-linear-gradient(bottom, #6d8a18, #6d8a18);
    background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)), -ms-linear-gradient(bottom, #6d8a18, #6d8a18);
    background: linear-gradient(bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)), linear-gradient(bottom, #6d8a18, #6d8a18);
  }