Bootstrap ist eine freie Sammlung von Hilfsmitteln für die Gestaltung von Websites und Webanwendungen. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-System, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen. Es ist das populärste Projekt beim Open-Source-Hostingdienst Github und wird unter anderem von der NASA und MSNBC eingesetzt. [Auszug aus der Wiki]

Seit knapp einer Woche nutze ich nun Bootstrap und ich muss zugeben, dass sich der Umstieg gelohnt hat! Das Framework ist schlichtweg genial und erleichtert mir so einige Arbeitsschritte. Wichtige Punkte sind dabei LESS-Unterstützung, Icons, 960er Grid und Responsive Layout! Im Verbund mit Boilerplate ist es der Perfekte Combo. Bootstrap kann auch mit WordPress genutzt werden.

Momentan ist die Version 2.3.1 aktuell, die Version 3 ist aber schon in den Startlöchern: Preview zu Version 3

Ich empfehle Euch wärmstens dem Projekt eine Chance zu geben und es mal genauer anzuschauen!

Quellen / Links:
Projektseite
Wiki Eintrag

Auf webdesignerwall.com wurde vor geraumer Zeit ein Artikel über CSS3 Buttons veröffentlicht.
Das tolle bei diesen Buttons ist, dass mit dieser CSS3 Technik sehr schöne plastische Buttons komplett ohne Grafiken erstellt werden können.

Features:

• Buttons ohne Grafiken, reines CSS(!)
• Linearer zweifarbiger Verlauf
• Textschatten
• Objektschatten
• Abgerundete Ecken (Vielleicht im IE9 dann )
• Diverse Grössen
• Der Button-Style ist auf alle Elemente Anwendbar
  (Crossbrowsertauglich vorausgesetzt der Doctype stimmt )
• Fallback-Style für ältere Browser welche die oben genannten Features nicht unterstützen
• Drei Stadien definerbar: Normal, Hover und Active
• Einfache Implementation

Hier der CSS-Code für die oben platzierten Coffee Buttons:

.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
}
.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}
.coffee {
	color: white;
	border: solid 1px #3d1800;
	background: #3d1800;
	background: -webkit-gradient(linear, left top, left bottom, from(#3d1800), to(#6f3c1b));
	background: -moz-linear-gradient(top,  #3d1800,  #6f3c1b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d1800', endColorstr='#6f3c1b');
}
.coffee:hover {
	background: #633518;
	color: white;
	background: -webkit-gradient(linear, left top, left bottom, from(#633518), to(#91532a));
	background: -moz-linear-gradient(top,  #633518,  #91532a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#633518', endColorstr='#91532a');
}
.coffee:active {
	color: white;
	background: -webkit-gradient(linear, left top, left bottom, from(#633518), to(#91532a));
	background: -moz-linear-gradient(top,  #633518,  #91532a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#633518', endColorstr='#91532a');
}

Der Button-Code könnte so aussehnen:

<div class="button coffee">Div</div>
oder
<input class="button coffee" value="Input Element" type="button"/>

Quellen:

webdesignerwall.com