A Pen by Sean Day.

A-Pen-by-Sean-Day.markdown

A Pen by Sean Day

A Pen by Sean Day on CodePen.

License.

index.html

<div id="wrapper">

<div class="button-group">
  <span class="button-icon appointment"><img src="http://about.itriagehealth.com/buttons/cal-icon.svg" width="20" height="20" /></span>
  <input type="button" class="btnBook" value="Book Now" />
</div>
  
  
</div>

style.css

* {
  margin: 0;
  padding: 0;
}

div#wrapper {
  margin-top:20px;
  margin-left: 20px;
}

.button-group {
  display: inline-block;
  border: 2px solid #ad552f;
  border-radius: 6px;
  box-shadow: 0 4px 5px rgba(0,0,0,0.3);
}

.button-group .button-icon {
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);  
  display: inline-block;
  line-height: 44px;
  padding-top: 1px;
  padding-left: 11px;
  padding-right: 11px;
  background: #dd6d34;
  background: -moz-linear-gradient(top,  #dd6d34 0%, #c95e32 49%, #c45430 50%, #a03d27 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd6d34), color-stop(49%,#c95e32), color-stop(50%,#c45430), color-stop(100%,#a03d27));
  background: -webkit-linear-gradient(top,  #dd6d34 0%,#c95e32 49%,#c45430 50%,#a03d27 100%);
  background: -o-linear-gradient(top,  #dd6d34 0%,#c95e32 49%,#c45430 50%,#a03d27 100%);
  background: -ms-linear-gradient(top,  #dd6d34 0%,#c95e32 49%,#c45430 50%,#a03d27 100%);
  background: linear-gradient(to bottom,  #dd6d34 0%,#c95e32 49%,#c45430 50%,#a03d27 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd6d34', endColorstr='#a03d27',GradientType=0 );
  margin-right: -4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  box-shadow: inset 0 1px 0 #ef9447 ;  
}

.button-group .button-icon img {
  display: inline-table;
  vertical-align: middle;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  margin-top: -6px;
  height: 20px;
  width: 20px;
}

.button-group .btnBook {
  display: inline-block;
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  border: none;
  background: #f7a13c;
  background: -moz-linear-gradient(top,  #f7a13c 0%, #e08338 49%, #da7736 50%, #bf532f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7a13c), color-stop(49%,#e08338), color-stop(50%,#da7736), color-stop(100%,#bf532f));
  background: -webkit-linear-gradient(top,  #f7a13c 0%,#e08338 49%,#da7736 50%,#bf532f 100%);
  background: -o-linear-gradient(top,  #f7a13c 0%,#e08338 49%,#da7736 50%,#bf532f 100%);
  background: -ms-linear-gradient(top,  #f7a13c 0%,#e08338 49%,#da7736 50%,#bf532f 100%);
  background: linear-gradient(to bottom,  #f7a13c 0%,#e08338 49%,#da7736 50%,#bf532f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7a13c', endColorstr='#bf532f',GradientType=0 );
  line-height: 44px;
  font-size: 16px;
  padding-left:16px;
  padding-right:16px;
  padding-bottom: 1px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: inset 0 1px 0 #ffd64c;
}