Red Green button

by Daniel Cheung

HTML

<button class="btn btn-success">Save Changes</button>
<button class="btn btn-danger">Discard</button>

CSS

.btn {
  padding: 8px 14px;
  border-radius:5px;
  border:1px solid #ccc;
  box-shadow: inset 0 1px 2px -2px rgba(255,255,255,0.4), inset 0 -1px 2px -2px rgba(0,0,0,0.4), 0 1px 1.5px -1px rgba(0,0,0,0.5);
  color: #fff;
  background-color: #666;
  width:120px;
}

.btn-success {
  border-color: #4A8511;
  background: #90c05c;
background: -moz-linear-gradient(top,  #90c05c 0%, #6ba537 100%);
background: -webkit-linear-gradient(top,  #90c05c 0%,#6ba537 100%);
background: linear-gradient(to bottom,  #90c05c 0%,#6ba537 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90c05c', endColorstr='#6ba537',GradientType=0 );
  text-shadow: 0 -1px #5C9B29;
}

.btn-danger {
  border-color: #951105;
  background: #d15d50;
background: -moz-linear-gradient(top,  #d15d50 0%, #bb382e 100%);
background: -webkit-linear-gradient(top,  #d15d50 0%,#bb382e 100%);
background: linear-gradient(to bottom,  #d15d50 0%,#bb382e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d15d50', endColorstr='#bb382e',GradientType=0 );
text-shadow: 0 -1px #B42B25;
}