Article 13

Styling Submit Buttons for Mobile Safari

By Keir Whitaker

31 August 2010 | Category: Design

As discussed on the most recent episode of Think Vitamin Radio we have been working hard on the redesign of this site and have been looking at how the site reacts when rendered on the iPhone using media queries (if these are new to you then Brian Suda's most recent article will get you started).

One thing both Mike and I had noticed is that submit buttons, when styled with CSS, appear to have a will of their own when viewed on the iPhone.

Submit Button Demo

Here's some basic CSS for a submit button:

input[type="submit"] {
    background: #262C32;
    width: 150px;
    padding: 9px;
    letter-spacing: 1px;
    border: none;
    color: #EFDDA8;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

very helpful for me