<Glazblog/>

iPhone-like back button in XUL

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!

Comments

1. On Wednesday 3 March 2010, 13:00 by Steffen

Current Firefox trunk nightlies introduced a new toolbar button style, where the asymmetric shape of the back/forward buttons (Windows only) are done using a svg mask, whose url points to a svg for the shape.

They also use -moz-linear-gradient for the background, -moz-box-shadow, text-shadow, and -moz-transition (bug 544999).

The only images are the back/forward arrows themselves.

Of course that's not exactly web-compatible yet...