Push My Buttons with CSS3

Q: What challenges do you face coding buttons?

• Creation & maintenance of images
• Internationalization & localization
• Enhancing “clickability” (interaction)
• Maintaining separation of content, style & behaviour in the code
• CSS3 offers you a solution!

Why style buttons?

• Make your call-to-action tantalizing. The more attention it gets, the clearer it is to the viewer what they should do.
• CSS states – active, focus, hover, visited – are useful & create CSS hooks + opportunity for interactivity.
• BUT, just because you can, doesn’t mean you should.
• Please, use good taste & judgement.

What is CSS?

• CSS is Cascading Style Sheets.
• CSS allows for separation of content & style, which creates information flexibility.
• Ideally, HTML is completely useful with no style or behavior (JavaScript or CSS).

CSS Structure

Basic Button Styling

Default styles

• HTML:

  <form>
  <ul>
  	<li><a href="#">Link</a></li>
  	<li><input type="submit" value="Submit"/></li>
  	<li><button type="submit">Button</button></li>
  </ul>
  </form>
  

• CSS:

  a.link	{ font-size:200%; }
  a:hover.link, a:focus.link 
  	{ color:#fff; text-decoration:underline; }
  button, input 
  	{ background:#fff; font-size:48px; padding:.1em .5em; }
  button:hover, input:hover, button:focus, input:focus 
  	{ background:#444; color:#ccc; }
  button:active, input:active 
  	{ background:#222; color:#000; }
  

Basic Button Styling

Image buttons

• Pros: visually interesting, consistent x-browser appearance
• Cons: inflexible to update, a lot of work to create/maintain, creating buttons for multiple languages is very resource-intensive, slower & more bandwidth-intensive, more http requests, complex CSS, & don’t scale with text

CSS 2.1

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

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

What is CSS3?

• CSS3 is the latest version of CSS, still in development by the CSS WG & browsers.
• CSS3 is in varying stages of readiness. Some CSS3 is stable enough to use today while other parts are not.
• If you do use CSS3 (and/or HTML5) today, be sure to build in appropriate fallbacks for non-modern browsers.
• Order your CSS properties properly, too. Vendor prefixes followed by the non-prefixed declaration. Once the property is supported, the final one will over-ride the old ones.

  -moz-border-radius:1em; -o-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; 

Browser Support for CSS3

http://findmebyip.com/litmus

What about using CSS3 today?

• Many CSS3 features are ready to use today in modern browsers.
• Others can be added to browsers that do not support the tech natively using polyfills (also called shims or shivs). A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively — flattening the API landscape (some call it Regressive Enhancement).

Have you ever built rounded corner buttons without CSS3?

CSS3 Button Examples, a

CSS3 Button Examples, b

E-Mail LinkedIn Facebook Twitter Flickr

E-Mail LinkedIn Facebook Twitter Flickr

How to Create Social Media Buttons Using CSS3 | CSS Heaven http://bit.ly/g4EPKF

Green Rounded Medium Small
Button Tag Span

Div

P Tag

H3

CSS3 Gradient Buttons - http://www.webdesignerwall.com/demo/css-buttons.html (http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/)

Stellar Creativity - Experimental

• Border-image Demos - http://www.lrbabe.com/sdoms/borderImage/
• Cascade Brewery Co - *Open Menu - http://www.cascadebreweryco.com.au/
• Zen - HTML5 - CSS3 Audio Player - http://lab.simurai.com/ui/zen-player/
• Sweet CSS3 Buttons - http://lab.simurai.com/css/buttons/
• Deaxon - http://playground.deaxon.com/css/flex-nav/
• Pure CSS Post Tags - http://cssglobe.com/lab/css3_tags/01.html
• Button by Dan Cederholm for Typekit, http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/, demo: http://css3exp.com/button/
• CSS3 buttons, more - http://inspectelement.com/demos/css3/buttons/
• More amazing buttons - http://houseofbuttons.tumblr.com/
• "CSS3 Buttons is a simple framework for creating good-looking GitHub style button links."

Resources

• @font-face: Fontspring and http://readableweb.com/new-font-face-syntax-simpler-easier/
• More on CSS3, from @LeaVerou: http://leaverou.me/ft2010 – cutting-edge presentation from Front Trends 2010
• Selectivizr: http://selectivizr.com
• Modernizr: http://www.modernizr.com/ is a JavaScript library that allows you to use CSS3 and HTML5 features while maintaining a fine level of control over browsers that don’t support them yet.
• CSS3Pie: http://css3pie.com/
• eCSStender: http://ecsstender.org/
  • [1] http://alistapart.com/articles/stop-forking-with-css3/
  • [2] http://ecsstender.org/demos/spoon/
• Curvy Corners JavaScript to get rounded corners in IE: http://www.curvycorners.net/
• Head.js: http://headjs.com - a script loader, a feature detector, and an HTML5 shiv/shim in just over 2kb of JavaScript
• Remy Sharp’s HTML5 shiv: http://remysharp.com/2009/01/07/html5-enabling-script/comment-page-2/
  hosted on Google http://html5shim.googlecode.com/svn/trunk/html5.js
• CSS Button Maker, CSS-Tricks - http://css-tricks.com/examples/ButtonMaker/#
• From The Filament Group: Styling the Button Element with CSS Sliding Doors - now with Image Sprites and IE 8 Support http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/

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,
Jen@inkpixelspaper.com | @inkpixelspaper