graphic of push button

NOTE: This is built for use use in Firefox, Chrome, Opera & Safari.
Use your keyboard directional arrows to advance the slides.
There are no controls for iOS & IE doesn’t work at all.

About Me

Ink Pixels Paper is my tiny design shop, providing communication services for non-profit, small and corporate businesses – design & production for books, collateral, signage, tradeshow graphics; interface & experience design for applications; design & development for websites.

This is my first time presenting on a web topic. I’m a performing independent musician & exhibiting visual artist, but… frankly, I’m still nervous!

Q: What challenges do you face coding buttons?

Why style buttons?

What is CSS?

CSS Structure

graphic CSS selector composed of properties with values

Basic Button Styling

Default styles

Basic Button Styling

Image buttons

Note: these are intentionally ugly because I don’t think image buttons are a good way to go — my personal bias.

CSS 2.1

CSS allows for color, border, backgrounds, & text replacement.

Technically, even CSS2.1 isn’t an approved spec.

What is CSS3?

Browser Support for CSS3

graphic of CSS3 browser support

What about using CSS3 today?

Have you ever built rounded corner buttons without CSS3?

CSS3 Button Examples, a

From an NDA project of mine
Edit this bookmark Delicious Edit Bookmark Button:
Glowing on rollover with Google fonts -
Lendle for Kindle Button:

CSS3 Button Examples, b

How to Create Social Media Buttons Using CSS3 | CSS Heaven

Stellar Creativity - Experimental


Thank you!

I hope you enjoyed the presentation, & thanks for your attention.

I prefer not to take onstage questions after my talks. Trust me, I do want to talk with you — but I believe onstage Q&A is a flawed format. It forces others to sit through questions that may not be relevant. It’s slow and awkward (“Hold on, we’ll get you a microphone”). It encourages speakers to issue trite diagnosis, not truthful complexity.

Rather than perpetuate this tired ritual, find me afterwards.
Let’s talk in person — it’s far more fun.

Thanks, | @inkpixelspaper