CSS3 push buttons

A quick CSS3 push buttons example

by Charles Butler

HTML

<div id="wrapper">
    <button class="myBtn">I am a button</button>
    <button class="myBtn-split"><i class="split"></i>I am a split button</button>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600italic,700,400italic);

body {
         font-family: "Open Sans", "Helvetica", Helvetica, Arial, sans-serif;

  background: #eee;
}

#wrapper {
  padding: 50px;
}

.myBtn, .myBtn-split {
  position: relative;
  display: inline-block;
  background-color: #42A715;
  background: linear-gradient(to bottom, #8DE579 0%, #74CE39 3%, #42A715 100%) repeat scroll 0% 0% transparent;
  border: solid 1px #42A715;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
      padding: 0px 10px;

    line-height:30px;
  text-shadow: 1px 1px 0 #e5f2ff;
  -moz-box-shadow: 0px 4px 0px 0px #627e99;
  -webkit-box-shadow: 0px 4px 0px 0px #627e99;
  -o-box-shadow: 0px 4px 0px 0px #627e99;
  box-shadow: 0px 4px 0px 0px #627e99;
}
.myBtn:active, .myBtn-split:active {
  top: 4px;
  box-shadow: none;
}

.myBtn-split {
  padding-right: 20px;
}
.myBtn-split .split {
  position: absolute;
  right: 3px;
    border-left:1px solid rgba(0,0,0,0.2);
padding: 5px -10px;
}
.myBtn-split .split:after {
  content: "\25BC";
}