Edit in JSFiddle

<div id="example-browse" class="ss-icon cf">
    <a href="#">skipback</a> 
    <a href="#">play</a> 
    <a href="#">skipforward</a>
</div>

.cf{zoom:1;}.cf:before,.cf:after{content:"";display:table;}.cf:after{clear: both;}
[id^="example-"] [class^="ss-"]:before {
  padding-right: 0.5em;
}
[id^="example-"] {
  font-size: 16px;
  line-height: 1.5;
  text-transform: none;
}
[id^="example-"]{
  margin: 25px 20px;
}

#example-browse a {
  background-color:#e5e5e5;
  box-shadow: 0 -2px 0 #ddd inset;
  color: #aaa;
  display: block;
  float: left;
  text-decoration: none;
  padding: 10px 12px 6px;
}
#example-browse a:hover {
  background-color:#88c800;
  box-shadow: 0 -2px 0 rgba(0,19,26,.1) inset;
  color: #fff;
}
#example-browse a:active {
  background-color:#75ae04;
  color: #fff;
  padding-top: 11px;
  padding-bottom: 5px;
}
#example-browse a:first-child {
  border-radius: 6px 0 0 6px;
}
#example-browse a:last-child {
  border-radius: 0 6px 6px 0;
}