How To Create a Stylish Button Entirely with CSS3

Apr 27, 2011 by Matt | Posted in Design No Comments

Web designers have been making dynamically-sized buttons using the “sliding doors” trick for awhile now, but isn’t that technique so 2003? Wouldn’t it be cooler to construct buttons using only CSS?

Line25 has a fresh tutorial on How To Create a Stylish Button Entirely with CSS3.

Next we can begin styling the button with a coloured background, this is where CSS gradients come in handy. Two colour swatches are converted into gradient syntax for both Mozilla and Webkit browsers using the handy CSS Gradient Generator, then a fallback option of a flat colour is added for non-supporting browsers.

The tutorial only uses the -moz and -webkit gradient properties, but someone in the comments included ones for Opera, Internet Explorer 10 and the W3C’s proposed syntax for the actual CSS3 spec.

Tempo: A Tiny JSON Templating Engine

Apr 25

Tempo is a 4kb JavaScript library that renders JSON into an HTML template. Your script can take something like this… …and populate it with JSON data from the Twitter API, which you could load with a couple lines of jQuery. It works with browser…

BlogBuzz April 23, 2011

Apr 23

WordPress BlackBox Debug Bar Plugin

Apr 20

BlackBox is a handy WordPress plugin that I’m going to have to try out for development. It adds a debug bar along the top of each page, with items that would be invaluable for plugin and theme developers but probably of little interest to…

StatDash: Statistics on Your WordPress Dashboard

Apr 18

Wouldn’t it be neat to have an at-a-glance display of common statistical information on your WordPress Dashboard? The StatDash plugin does exactly that, adding a customizable widget that shows stats from Google Analytics, Feedburner, Twitter and even your earnings from the Envato Marketplaces. You…

BlogBuzz April 16, 2011

Apr 16

Try Ruby: A Clever Interactive Programming Tutorial

Apr 15

Teaching a newbie how to program is a difficult task, whether you’re writing a book, recording a screencast or teaching a class. Similarly, it’s a bit of a hassle for someone who is proficient with one or two languages to pick up a new…

How to Remove the Bookmark Toolbar Icons in Firefox 4

Apr 13

Prior to Firefox 4, the Mac version didn’t display favicons beside items on the Bookmarks Toolbar, unlike its Windows counterpart. I’ve become accustomed to this behavior, as it uses significantly less space. (I tend to use the Bookmarks Toolbar not just for frequently-used links…

Syncing Content With HTML5 Video or Audio

Apr 11

This is one of the coolest Smashing Magazine articles I have seen in awhile: Syncing Content With HTML5 Video. Using the generic HTLM5 video and audio elements and a bit of JavaScript, the timeupdate event in particular, you can synchronize script events to the…

BlogBuzz April 9, 2011

Apr 9