mi24.net

Styled Buttons a la Google
http://swizec.com/code/styledButton/
(also covers methods of doing selects / drop downs)

Recreating the Button (Custom Buttons)
http://stopdesign.com/archive/2009/02/04/recreating-the-button.html

Type study: An all CSS button
http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/

Gmail/Twitter/OSX Style Buttons with CSS
http://drewjoh.com/2010/04/gmailtwitterosx-style-buttons-with-css/

It seems that time and time again I seem to come across the same difficulties with CSS, and that is working out that once I’ve completed something I could have done it better. It seems to me that as a best practice for reliability with rendering it’s good to START FROM THE INSIDE ELEMENTS AND WORK OUTWARDS!

What does this mean?

It means that if you have a page made up of many elements then it is good to build the overall structure first of course, but once you have the outer frame built then go through the design and look for any bits that are repeated. Once you have them clocked then build them as mini modules and then work your way out and incorporate those mini modules into your larger design. For example, at the moment I’m building pages that contain alot of bar graphs and although I’ve built the graphs well I realise that I probably could have made it easier for myself if I had have started from building the actual bar elements as modules first and then incorporating them into the overall graph. This makes much more sense to me now.

Goddam this is so simple, and all this time …

http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats/

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

http://lesscss.org/

example usage:

// set up "functions":
.radius(@r: 5px) {
-moz-border-radius: @r;
-webkit-border-radius: @r;
border-radius: @r;
}
.boxshadow(@y: 5px, @blur: 20px, @opacity: 0.5) {
-moz-box-shadow: 0 @y @blur rgba(0, 0, 0, @opacity);
-webkit-box-shadow: 0 @y @blur rgba(0, 0, 0, @opacity);
box-shadow: 0 @y @blur rgb(255-(@opacity*255), 255-(@opacity*255), 255-(@opacity*255));
}
.gradient(@from: #ccc, @to: #eee) {
background: (@from+@to)/2;
background: -webkit-gradient(linear, left bottom, left top, from(@from), to(@to));
background: -moz-linear-gradient(bottom, @from, @to);
}

// use "functions":
#tooltip {
.radius; // default arguments
.boxshadow; // default arguments
.gradient(#ddd, #fff); // custom arguments
}
.editor { // all custom args
.radius(10px);
.boxshadow(5px, 30px, .5);
.gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
}

generated CSS:

#tooltip{background:#eeeeee;background:-webkit-gradient(linear, left bottom, left top, from(#dddddd), to(#ffffff));background:-moz-linear-gradient(bottom, #dddddd, #ffffff);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 5px 20px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 5px 20px rgba(0, 0, 0, 0.5);box-shadow:0 5px 20px #808080;}
.editor{background:#ffffff;background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0.6)));background:-moz-linear-gradient(bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:0 5px 30px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 5px 30px rgba(0, 0, 0, 0.5);box-shadow:0 5px 30px #808080;}

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

http://sass-lang.com/