Orange Red Button

by Daniel Cheung

HTML

<div class="btn-container">
  <button class="btn">Push</button>
</div>

CSS

body {
  background-color: #C94025;
}

.btn {
  border:2px solid #7B0F07;
  border-radius: 6px;
  background: rgb(220,65,23);
background: -moz-linear-gradient(top,  rgba(220,65,23,1) 0%, rgba(220,65,23,1) 50%, rgba(208,46,23,1) 51%, rgba(208,46,23,1) 100%);
background: -webkit-linear-gradient(top,  rgba(220,65,23,1) 0%,rgba(220,65,23,1) 50%,rgba(208,46,23,1) 51%,rgba(208,46,23,1) 100%);
background: linear-gradient(to bottom,  rgba(220,65,23,1) 0%,rgba(220,65,23,1) 50%,rgba(208,46,23,1) 51%,rgba(208,46,23,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc4117', endColorstr='#d02e17',GradientType=0 );
  font-size:18px;
  color: #fff;
  padding:3px 12px;
  box-shadow: inset 0 -4px 4px rgba(208,46,23,1), inset 0 0 0 2px rgba(255,255,255,0.3), 0 2px 1.5px -1px rgba(0,0,0,0.4);
  text-shadow: 0 -1px #A21F0D;
  font-family: "arial";
}

.btn-container {
  padding:3px;
  background: #b3250f;
background: -moz-linear-gradient(top,  #b3250f 0%, #de492e 100%);
background: -webkit-linear-gradient(top,  #b3250f 0%,#de492e 100%);
background: linear-gradient(to bottom,  #b3250f 0%,#de492e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3250f', endColorstr='#de492e',GradientType=0 );
display:inline-block;
border-radius:8px;

}

.btn:active {
  background: #a50402;
background: -moz-linear-gradient(top,  #a50402 0%, #e54321 100%);
background: -webkit-linear-gradient(top,  #a50402 0%,#e54321 100%);
background: linear-gradient(to bottom,  #a50402 0%,#e54321 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a50402', endColorstr='#e54321',GradientType=0 );
 box-shadow: inset 0 -4px 4px #e54321, inset 0 0 0 2px #E54321;
}