I recently found that very interesting page (you'll need Safari for that one) and thought I could rather easily adapt the webkit-based styles to moz. Here's the result:

iPhone-like button

This is strictly CSS-based, using the -moz-border-image property. You'll need the two following images to make it work:

left.png
 left-hover.png
left.png
 left-hover.png

And here are the very simple style rules to turn for instance a XUL <button class="macLeftNavButton"/> into the beast above:

.macLeftNavButton {
  -moz-appearance:none;
  padding: 4px;
  min-width:75px;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  font-size: xx-small;
  text-decoration: none;
  border-left: 12px;
  border-right: 5px;
  color: white;
  text-shadow: #000 0px 1px 1px;
  -moz-border-image: url("left.png") 0 5 0 12;
}

.macLeftNavButton:hover {
  -moz-border-image: url("left-hover.png") 0 5 0 12;
}

.macLeftNavButton:hover:active {
  padding: 5px 3px 3px 5px;
}

I tested that on my Mac and it works absolutely fine. It could require some tweaking on win/linux but you probably don't want iPhone-like buttons on those platforms anyway. Creating the right-arrow buttons is trivial and I'll let you do that yourself. Enjoy!