A CodePen by James Doyle. Synth App Buttons - synth app buttons from the Untitled iPhone synth app waveforms dribbble shot by Mikael Eidenberg

index.html

<p><a href="http://drbl.in/eWtH" target="_blank">based on 'Untitled iPhone synth app waveforms' by Mikael Eidenberg</a></p>
<div class="group">
<input id="Radio1" name="Radios" type="radio" value="First Option" checked="checked">
<label for="Radio1">A</label>
<input id="Radio2" name="Radios" type="radio" value="Other Option" >
<label class="center" for="Radio2">B</label>
<input id="Radio3" name="Radios" type="radio" value="Other Option" >
<label for="Radio3">C</label>
</div><br/><br />
<div class="group">
<input id="checkbox1" name="checkboxs" type="checkbox" value="First Option" checked="checked">
<label for="checkbox1">A</label>
<input id="checkbox2" name="checkboxs" type="checkbox" value="Other Option" >
<label class="center" for="checkbox2">B</label>
<input id="checkbox3" name="checkboxs" type="checkbox" value="Other Option" >
<label for="checkbox3">C</label>
</div>

style.css

body {
    margin: 2em; 
    font-family: Arial, Helvetica, sans-serif;
    background: #333;
}

a {
  color: white;
  text-decoration: none;
  text-shadow: 0 1px 0 black;
}

.group {
    border: 2px solid #121212;
    height: 36px;
    width: 164px;
    border-radius: 3px;
    background: #222;
    background-clip: border-box;
}

input[type="radio"], 
input[type="checkbox"] {
    /* hide the inputs */
    opacity: 0;
    display: none;
    margin: 0;
}

/* style your lables/button */
input[type="radio"] + label, 
input[type="checkbox"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    float: left;
    padding: 9px 21px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.7), 0 0 0 hsla(208.12, 44.44%, 85.88%, 0);
    color: #fff;
    font-weight: bold;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 10px -1px rgba(0,0,0,0.6);
    background: -moz-linear-gradient(top, #37373d 0%, #222228 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37373d), color-stop(100%,#222228)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #37373d 0%,#222228 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #37373d 0%,#222228 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #37373d 0%,#222228 100%); /* IE10+ */
    background: linear-gradient(to bottom, #37373d 0%,#222228 100%); /* W3C */
}

input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label{
    /* style for the checked/selected state */
    text-shadow: 0 0 10px hsla(208.12, 44.44%, 85.88%, 1);
    color: #fff;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.4), inset 0 0 4px 4px rgba(0,0,0,0.1);
    background: -moz-linear-gradient(top, #313137 0%, #1e1e24 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#313137), color-stop(100%,#1e1e24)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #313137 0%,#1e1e24 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #313137 0%,#1e1e24 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #313137 0%,#1e1e24 100%); /* IE10+ */
    background: linear-gradient(to bottom, #313137 0%,#1e1e24 100%); /* W3C */
}

.group > label {
    border-radius: 2px;
}

.center {
    border-left: 1px solid #121212;
    border-right: 1px solid #121212;
}