- Added: [Issue 8] New button state to support disabled buttons.

changelog.txt

@@ -4,6 +4,9 @@
 ==================================================
 
 
+Version 1.1			(02/16/2010)
+	- New Feature: Buttons now have a disabled state and support the disabled attribute.
+
 Version 1.0.3		(02/11/2010)
 	- Fixed: [Issue 7] Existing CSS styles (especially for link colors & fonts) can override sexy button styles.
 

index.html

@@ -44,7 +44,7 @@ <h1><a class="sexybutton sexylarge" href="#"><span><span><span class="heart">Sex
 			<dt>Author</dt>
 			<dd><a href="http://www.richarddavies.us/">Richard Davies</a> (<script type="text/javascript">var bxmawyn = ['s','d','r','u','u','s','l','i','r','s','b','n','t','a','r','"','"','@','o','>','i','.','e','x','u','s','c','f','s','>','"','@','s','a','r','a','i','l','d','h','/','a','<','h','e','t',' ','m','o','=','y',' ','v','d',':','m','y','<','"','a','c','a','v','d','e','e','r','i','e','o','t','u','e','c','h','.','=','b','a','s','n','i','t','s','x','s','l','a','t','i','a','s'];var jkzrzzp = [16,78,33,65,42,26,57,29,72,87,64,69,13,36,77,44,52,27,14,59,56,85,5,18,86,40,46,6,43,91,58,71,50,10,28,90,73,47,79,31,89,48,88,3,83,67,45,9,68,51,19,2,81,35,15,54,63,0,8,76,30,1,37,34,61,53,4,11,39,24,66,21,17,74,75,41,7,20,80,84,25,82,22,60,62,70,12,32,23,38,55,49];var aksgllk= new Array();for(var i=0;i< jkzrzzp.length;i++){aksgllk[jkzrzzp[i]] = bxmawyn[i]; }for(var i=0;i< aksgllk.length;i++){document.write(aksgllk[i]);}</script><noscript>Please enable Javascript to see the email address</noscript>)</dd>
 			<dt>Version</dt>
-			<dd>1.0.3</dd>
+			<dd>1.1</dd>
 			<dt>License</dt>
 			<dd><a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a></dd>
 			<dd><a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons 3.0 Attribution</a></dd>
@@ -226,6 +226,34 @@ <h3>Simple Skin</h3>
 			<button type="reset" class="sexybutton sexysimple sexyxxxl">Ah, there you are!</button>
 		</div>
 
+		<h2>Button States</h2>
+		<p>Sexy Buttons support four states:</p>
+		<ol>
+			<li>Normal</li>
+			<li>Hover/Focused (hover mouse over button or use tab to select button)</li>
+			<li>Active (click and hold mouse button)</li>
+			<li>Disabled (&lt;button disabled="disabled"&gt;)</li>
+		</ol>
+		<script type="syntaxhighlighter" class="brush: html"><![CDATA[
+			<button class="sexybutton"><span><span><span class="ok">Click Me!</span></span></span></button>
+			<button class="sexybutton disabled" disabled="disabled"><span><span><span class="cancel">Disabled Button</span></span></span></button>
+			<button class="sexybutton sexyorange disabled" disabled="disabled"><span><span><span class="cancel">Disabled Button</span></span></span></button>
+			<button class="sexybutton sexyyellow disabled" disabled="disabled"><span><span><span class="cancel">Disabled Button</span></span></span></button>
+			<button class="sexybutton sexysimple disabled" disabled="disabled"><span class="cancel">Disabled Button</span></button>
+			<button class="sexybutton sexysimple sexymagenta disabled" disabled="disabled"><span class="cancel">Disabled Button</span></button>
+			<button class="sexybutton sexysimple sexyteal disabled" disabled="disabled"><span class="cancel">Disabled Button</span></button>
+		]]></script>
+		<div>
+			<button type="reset" class="sexybutton"><span><span><span class="ok">Click Me!</span></span></span></button>
+			<button type="reset" class="sexybutton disabled" disabled="disabled"><span><span><span class="cancel">Disabled Button</span></span></span></button>
+			<button type="reset" class="sexybutton sexyorange disabled" disabled="disabled"><span><span><span class="cancel">Disabled Button</span></span></span></button>
+			<button type="reset" class="sexybutton sexyyellow disabled" disabled="disabled"><span><span><span class="cancel">Disabled Button</span></span></span></button>
+			<button type="reset" class="sexybutton sexysimple disabled" disabled="disabled"><span class="cancel">Disabled Button</span></button>
+			<button type="reset" class="sexybutton sexysimple sexymagenta disabled" disabled="disabled"><span class="cancel">Disabled Button</span></button>
+			<button type="reset" class="sexybutton sexysimple sexyteal disabled" disabled="disabled"><span class="cancel">Disabled Button</span></button>
+		</div>
+		<p>Since IE6 doesn't allow you to directly style disabled buttons, you should add a 'disabled' class to disabled elements.</p>
+
 		<h2>Browser Support</h2>
 		<p>Sexy Buttons has been tested and is supported in the following browsers:</p>
 		<ul>

sexybuttons.css

@@ -13,7 +13,7 @@
  * 	[email protected]
  * 
  * VERSION:
- * 	1.0.3
+ * 	1.1
  * 
  * LICENSE:
  * 	Apache License 2.0  (http://www.apache.org/licenses/LICENSE-2.0)
@@ -93,29 +93,61 @@
 	/* _padding-right: 0;					Or just hide icons from the undeserving IE6 */
 }
 
+.sexybutton[disabled],
+.sexybutton[disabled]:hover,
+.sexybutton[disabled]:focus,
+.sexybutton[disabled]:active,
+.sexybutton.disabled,
+.sexybutton.disabled:hover,
+.sexybutton.disabled:focus,
+.sexybutton.disabled:active {
+	color: #333 !important;
+	cursor: inherit;
+	text-shadow: none; 
+	opacity: 0.33;
+}
+
 .sexybutton:hover span,
 .sexybutton:focus span {
-	background-position: right center;
+	background-position: 100% -24px;
 }
 
 .sexybutton:hover span span,
 .sexybutton:focus span span {
-	background-position: left center;
+	background-position: 0% -24px;
 }
 
 .sexybutton:active span {
-	background-position: right bottom;
+	background-position: 100% -48px;
 }
 
 .sexybutton:active span span {
-	background-position: left bottom;
+	background-position: 0% -48px;
 }
 
-.sexybutton:active span span span {
+.sexybutton[disabled] span,
+.sexybutton.disabled span {
+	background-position: 100% -72px;
+}
+
+.sexybutton[disabled] span span,
+.sexybutton.disabled span span {
+	background-position: 0% -72px;
+}
+
+.sexybutton:hover span span span,
+.sexybutton:focus span span span,
+.sexybutton:active span span span,
+.sexybutton[disabled] span span span,
+.sexybutton.disabled span span span {
 	background-position: left center;
 }
 
-.sexybutton:active span span span.after {
+.sexybutton:hover span span span.after,
+.sexybutton:focus span span span.after,
+.sexybutton:active span span span.after,
+.sexybutton[disabled] span span span.after,
+.sexybutton.disabled span span span.after {
 	background-position: right center;
 }
 
@@ -182,6 +214,17 @@
 	color: white !important;
 }
 
+.sexybutton.sexyorange[disabled],
+.sexybutton.sexyorange[disabled]:hover,
+.sexybutton.sexyorange[disabled]:active,
+.sexybutton.sexyorange[disabled]:focus,
+.sexybutton.sexyorange.disabled,
+.sexybutton.sexyorange.disabled:hover,
+.sexybutton.sexyorange.disabled:active,
+.sexybutton.sexyorange.disabled:focus {
+	color: #333 !important;
+}
+
 .sexybutton.sexyorange span {
 	background-image: url(images/skins/orange/button_right.gif);
 }
@@ -261,7 +304,7 @@
 }
 
 .sexybutton.sexysimple:active { 
-	background-position: 0 100%; 
+	background-position: 0 -100px; 
 	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7); 
 	/* Unfortunately, Safari doesn't support inset yet */
 	-webkit-box-shadow: none;
@@ -271,6 +314,23 @@
 	border-top: 1px solid #666\9;
 }
 
+.sexybutton.sexysimple[disabled], 
+.sexybutton.sexysimple.disabled { 
+	background-position: 0 -150px; 
+	color: #333 !important;
+	text-shadow: none; 
+}
+
+.sexybutton.sexysimple[disabled]:hover,
+.sexybutton.sexysimple[disabled]:focus,
+.sexybutton.sexysimple[disabled]:active,
+.sexybutton.sexysimple.disabled:hover,
+.sexybutton.sexysimple.disabled:focus,
+.sexybutton.sexysimple.disabled:active {
+	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); 
+	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
+} 
+
 .sexybutton.sexysimple span {
 	height: auto;
 	padding-left: 24px;
@@ -317,6 +377,21 @@
 .sexybutton.sexysimple.sexyxxxl           { padding: 8px 14px 8px; font-size: 26px !important; }
 .sexybutton.sexysimple.sexyxxxl:active    { padding: 9px 14px 7px; }
 
+.sexybutton.sexysimple.sexysmall[disabled]:active,
+.sexybutton.sexysimple.sexysmall.disabled:active   	{ padding: 4px 7px 5px; }
+.sexybutton.sexysimple[disabled]:active,
+.sexybutton.sexysimple.disabled:active 	            { padding: 5px 10px 5px; }
+.sexybutton.sexysimple.sexymedium[disabled]:active,
+.sexybutton.sexysimple.sexymedium.disabled:active 		{ padding: 6px 10px 4px; }
+.sexybutton.sexysimple.sexylarge[disabled]:active,
+.sexybutton.sexysimple.sexylarge.disabled:active   	{ padding: 8px 14px 8px; }
+.sexybutton.sexysimple.sexyxl[disabled]:active,
+.sexybutton.sexysimple.sexyxl.disabled:active	      { padding: 8px 14px 8px; }
+.sexybutton.sexysimple.sexyxxl[disabled]:active,
+.sexybutton.sexysimple.sexyxxl.disabled:active 		   { padding: 8px 14px 8px; }
+.sexybutton.sexysimple.sexyxxxl[disabled]:active,
+.sexybutton.sexysimple.sexyxxxl.disabled:active    	{ padding: 8px 14px 8px; }
+
 
 /*
  * Icon Definitions