title: Is there a way to make a three-dimensional color like buttonface for HTML buttons in CSS?
body: <p>I made a quick <a href="http://jsfiddle.net/240f2vmu/" rel="nofollow">jsfiddle</a> to illustrate what I mean.</p>
  
  <p>As you can see the one with the default bg color button face looks 3D, is there a way to replicate this with CSS as other colors than the greyish one buttonface is?</p>
  
  <pre><code>&lt;body&gt;
      &lt;button&gt;I have buttonface&lt;/button&gt;
      &lt;button style="background-color:purple;"&gt;I don't have buttonface&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>