Pure CSS3 Buttons in Mobile WebKit

By Patrick Evans

Screenshot comparing HTML5 and native buttons

Pure CSS3 buttons in Mobile WebKit

Recently, we introduced a lower friction pathway from the wilds of the world wide web into our app, HotelTonight.  We see a lot of traffic coming on mobile devices and decided to try to put as much of the HotelTonight experience in front of visitors as possible.

In addition to implementing a deal sample screen, which you can see by visiting our homepage with an iPhone, Android or Blackberry device, we have a signup page which allows users to quickly create an account from scratch or by linking up with their facebook profile.

It was important for us to create a seemless transition between the web-based signup and the app. We’re obscenely proud of our apps, and the faster we can show you why the happier we are. We approached the signup screen as a trailer for the native apps, and to accomplish that we needed to nail the native-looking elements.

Why pure CSS3?

There are quite a few techniques for emulating native iphone app controls, some incredibly creative, using images in different ways. This approach has a lot of advantages, primary among them being that you can capture all the subtlety employed in the native elements using tools well suited to the task (Photoshop, Fireworks, maybe Pixelmator).

But there are drawbacks as well. Using images in almost any capacity can severely limit your design. Characteristics like color, opacity and dimension can be pegged down when using images.

An image also increases the load time of your page, which is a first-order offense in mobile web development. Yes, it doesn’t have to increase it by much, but we approached adding a resource to load as a last-resort. The signup page needed to be as fast to load as we could push it, and push it we did.

Implementation

One key aspect for our implementation of these iphone-style buttons was the semantic structure of our forms. We’re pretty big into semantic markup, and as it happened that worked out very much in our favor. The following is a snippet that shows how the button is rendered into our form:

<!-- // semantic button layout // -->
<fieldset>
  <ol>
    <li class="button">
      <button class="native" name="sync" type="button">Button</button>
    </li>
  </ol>
</fieldset>

You can see that the list item tag is classed as a “button”, which we use to achieve the outset border look of the native button by styling the list item tag as the outset border. We probably would have needed an extra[neous] div tag around the button without this.

You can see the effect below, first in the native implementation and then in our HTML5 implementation:

Close-up of native button

Close-up of HTML5 button

CSS

The styling leverages some key features of the CSS3 spec that are generally well supported across WebKit browsers including box shadows (and inset box shadows), linear gradients and text shadows.

li.button {
  margin-top:       10.5px;
  width:            264px;
  display:          inline-block;
  padding:          1px;
  border-radius:    12px;
  background-color: #454850;
  box-shadow:       inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

li.button > button {
  color:            #111111;
  padding:          6px 0 6px 0;
  width:            99%;
  text-align:       center;
  text-shadow:      0 1px 1px white;
  border:           0;
  box-shadow:       0 0 2px rgba(0, 0, 0, 0.5);
  border-radius:    10px;
  border-top:       1px solid rgba(255, 255, 255, 0.5);
  border-bottom:    1px solid rgba(0, 0, 0, 0.75);
  font-size:        20px;
  font-weight:      bold;
  font-family:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:       #e2e2e2;
  background:       -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe));
  background:       -webkit-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  background:       linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
}
Written by Patrick Evans

Read more posts by Patrick, and follow Patrick on Twitter.

Interested in building something great?

Join us in building the worlds most loved hotel app.
View our open engineering positions.