Styling iOS WebKit buttons – demo page

This is a demo document related to the article Styling buttons in iOS WebKit and -webkit-appearance:none. Please see the article for context and information.

The following is a completely unstyled button.

The following button is styled. Many of the properties do not take effect in iOS WebKit browsers.

The following button has the same CSS as the previous one, but instead of a flat background colour it uses a linear gradient with the same start and end colours.

The following button has the same CSS as the second button, but also a -webkit-appearance:none declaration.

If you do not have access to an iOS device or simulator, here is a screenshot of the buttons as they appear in Safari for iOS:

Screenshot of various CSS applied to buttons in Safari for iOS.