Posts Tagged ‘iphone’

Shiny CSS-only iPhone Buttons

Friday, November 27th, 2009

Just a quickie: I came up with these CSS-only iPhone-style but­tons as part of a big­ger pet project I’m work­ing on. They make heavy use of -webkit-gradient instead of the typ­i­cal PNG-based solu­tion you typ­i­cally see out there, such as in iUI.

The CSS is here, and be sure to check out the exam­ple but­tons.

The one thing I’m not crazy about when you use these styles on an actual device is that the nor­mal :active state doesn’t get trig­gered, so I kind of had to half-ass it with a :hover so you’d see the “active” style as the but­ton sheet eases out (if you’ve wired the tran­si­tions together).

Enjoy, and please let me know if you find them useful.