Skip to content

Instantly share code, notes, and snippets.

@sday222
Created August 26, 2013 18:14
Show Gist options
  • Save sday222/6344641 to your computer and use it in GitHub Desktop.
Save sday222/6344641 to your computer and use it in GitHub Desktop.
A Pen by Sean Day.
<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>
* {
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment