Started working on Button

css/uniform.default.css

@@ -1,7 +1,7 @@
 /*
 
 Uniform Theme: Uniform Default
-Version: 1.5.5
+Version: 1.5.7
 By: Josh Pyles
 License: MIT License
 ---
@@ -20,19 +20,24 @@ div.selector span,
 div.checker span, 
 div.radio span, 
 div.uploader, 
-div.uploader span.action {
+div.uploader span.action,
+div.button,
+div.button span {
   background-image: url(../images/sprite.png);
   background-repeat: no-repeat;
+  -webkit-font-smoothing: antialiased;
 }
 
 .selector, 
 .radio, 
 .checker, 
-.uploader, 
+.uploader,
+.button, 
 .selector *, 
 .radio *, 
 .checker *, 
-.uploader *{
+.uploader *,
+.button *{
 	margin: 0;
 	padding: 0;
 }
@@ -47,6 +52,8 @@ textarea.uniform {
   font-weight: normal;
   padding: 3px;
   color: #777;
+  background: url('../images/bg-input-focus.png') repeat-x 0px 0px;
+  background: url('../images/bg-input.png') repeat-x 0px 0px;
   border-top: solid 1px #aaa;
   border-left: solid 1px #aaa;
   border-bottom: solid 1px #ccc;
@@ -57,24 +64,14 @@ textarea.uniform {
   outline: 0;
 }
 
-input.text,
-input.password {
-  background: #fff;
-  background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#e5e5e5), to(#fff));
-}
-
-textarea.uniform {
-  background: #fff;
-  background: -webkit-gradient(linear, 0% 0%, 0% 10%, from(#e5e5e5), to(#fff));
-}
-
 input.text:focus,
 input.password:focus,
 textarea.uniform:focus {
   -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
   box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
   border-color: #999;
+  background: url('../images/bg-input-focus.png') repeat-x 0px 0px;
 }
 
 /* SPRITES */
@@ -326,6 +323,73 @@ div.uploader.disabled span.action {
   background-position: right -381px;
 }
 
+div.button {
+  background-position: 0px -523px;
+  height: 30px;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+}
+
+div.button a,
+div.button button,
+div.button input {
+  position: absolute;
+}
+
+div.button span {
+  background-position: right -643px;
+  margin-left: 13px;
+  display: block;
+  height: 30px;
+  font-weight: bold;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  padding-left: 2px;
+  padding-right: 15px;
+  line-height: 30px;
+  text-align: center;
+}
+
+div.button.focus,
+div.button:focus,
+div.button:hover,
+div.button.hover {
+  background-position: 0px -553px;
+}
+
+div.button.focus span,
+div.button:focus span,
+div.button:hover span,
+div.button.hover span {
+  background-position: right -673px; 
+}
+
+div.button.active,
+div.button:active {
+  background-position: 0px -583px;
+}
+
+div.button.active span,
+div.button:active span {
+  background-position: right -703px;
+  color: #555;
+}
+
+div.button.disabled,
+div.button:disabled {
+  background-position: 0px -613px;
+}
+
+div.button.disabled span,
+div.button:disabled span {
+  background-position: right -733px;
+  color: #bbb;
+  cursor: default;
+}
+
 /* PRESENTATION */
 
 /* Select */

jquery.uniform.js

@@ -1,8 +1,6 @@
 /*
 
-TO DO: Test in all browsers, clean up theme file, prepare documentation, minisite?
-
-Uniform v1.5
+Uniform v1.7
 Copyright © 2009 Josh Pyles / Pixelmatrix Design LLC
 http://pixelmatrixdesign.com
 
@@ -18,22 +16,6 @@ Also, thanks to David Kaneda and Eugene Bond for their contributions to the plug
 License:
 MIT License - http://www.opensource.org/licenses/mit-license.php
 
-Usage:
-
-$(function(){
-  $("select, :radio, :checkbox").uniform();
-});
-
-You can customize the classes that Uniform uses:
-
-$("select, :radio, :checkbox").uniform({
-  selectClass: 'mySelectClass',
-  radioClass: 'myRadioClass',
-  checkboxClass: 'myCheckboxClass',
-  checkedClass: 'myCheckedClass',
-  focusClass: 'myFocusClass'
-});
-
 Enjoy!
 
 */
@@ -52,6 +34,7 @@ Enjoy!
       checkedClass: 'checked',
       focusClass: 'focus',
       disabledClass: 'disabled',
+      buttonClass: 'button',
       activeClass: 'active',
       hoverClass: 'hover',
       useID: true,
@@ -103,6 +86,78 @@ Enjoy!
         It's crazy, but it just might work!
       
       */
+      $el = elem;
+
+      var divTag = $("<div>"),
+          spanTag = $("<span>");
+
+      divTag.addClass(options.buttonClass);
+
+      if(options.useID) divTag.attr("id", options.idPrefix+"-"+$el.attr("id"));
+
+      var btnText;
+
+      if($el.is("a")){
+        btnText = $el.text();
+      }else if($el.is("button")){
+        btnText = $el.text();
+      }else if($el.is(":submit")){
+        btnText = $el.attr("value");
+      }
+
+      if(btnText == "") btnText = "Submit";
+
+      spanTag.html(btnText);
+
+      $el.hide();
+      $el.wrap(divTag);
+      $el.wrap(spanTag);
+
+      //redefine variables
+      divTag = $el.closest("div");
+      spanTag = $el.closest("span");
+
+      if($el.is(":disabled")) divTag.addClass(options.disabledClass);
+
+      divTag.bind({
+        "mouseenter.uniform": function(){
+          divTag.addClass(options.hoverClass);
+        },
+        "mouseleave.uniform": function(){
+          divTag.removeClass(options.hoverClass);
+        },
+        "mousedown.uniform": function(){
+          divTag.addClass(options.activeClass);
+        },
+        "mouseup.uniform": function(){
+          divTag.removeClass(options.activeClass);
+        },
+        "click.uniform": function(e){
+          if($(e.target).is("span") || $(e.target).is("div")){    
+            if(elem[0].dispatchEvent){
+              var ev = document.createEvent('MouseEvents');
+              ev.initEvent( 'click', true, true );
+              elem[0].dispatchEvent(ev);
+            }else{
+              elem[0].click();
+            }
+          }
+        }
+      });
+
+      elem.bind({
+        "focus.uniform": function(){
+          divTag.addClass(options.focusClass);
+        },
+        "blur.uniform": function(){
+          divTag.removeClass(options.focusClass);
+        },
+        "click.uniform": function(e){
+        }
+      });
+
+      $.uniform.noSelect(spanTag);
+      storeElement(elem);
     }
 
     function doSelect(elem){
@@ -578,9 +633,11 @@ Enjoy!
           doInput(elem);
         }else if(elem.is("textarea")){
           doTextarea(elem);
+        }else if(elem.is("a") || elem.is(":submit") || elem.is("button")){
+          doButton(elem);
         }
 
       }
     });
   };
-})(jQuery);
+})(jQuery);