gecko-dev/themes/classic/global/win/button.css

/* NEW WIDGET ANDING: <button> */

/** Default Button Styles (apply to usage of <button> without 
 *  any applied class).
 **/

/* outer frame */
  button, button.left
    {
      -moz-binding        : url("chrome://global/skin/buttonBindings.xml#buttonleft");
      border-left         : 1px solid threedface;
      border-top          : 1px solid threedface;
      border-right        : 1px solid threeddarkshadow;
      border-bottom       : 1px solid threeddarkshadow;
      margin              : 1px 5px 2px 5px;
      min-width           : 6.3em;
      /* font-family         : sans-serif;
      font                : button; */
      color               : buttontext;
      -moz-user-focus     : normal;
    }
  
  button, 
  button[disabled="true"][default],
  button[disabled="true"]:hover:active
    {
      border-left         : 1px solid ThreeDLightShadow;
      border-top          : 1px solid ThreeDLightShadow;
      border-right        : 1px solid ThreeDDarkShadow;
      border-bottom       : 1px solid ThreeDDarkShadow;
    }

  .button-box-1,
  button[disabled="true"][default] > .button-box-1,
  button[disabled="true"]:hover:active > .button-box-1
    {
      border-left         : 1px solid ThreeDHighlight;
      border-top          : 1px solid ThreeDHighlight;
      border-right        : 1px solid ThreeDShadow;
      border-bottom       : 1px solid ThreeDShadow;
      -moz-user-focus     : none;
    }

  .button-box-2,
  button[disabled="true"][default] > .button-box-1 > .button-box-2,
  button[disabled="true"]:hover:active > .button-box-1 > .button-box-2
    {
			border              : 1px solid ThreeDFace;	
    }
        
  button:hover:active 
    {
      border              : 1px solid threeddarkshadow;
    }

  button:hover:active > .button-box-1
    {
      border              : 1px solid threedshadow;
    }

  button:hover:active > .button-box-1 > .button-box-2
    {
      border              : 1px solid threedface;
    }

  button:hover:active > .button-box-1 > .button-box-2 > .button-box-text
    {
      padding             : 1px 2px 0px 3px; 
    }
  
  button[disabled="true"],
  button[disabled="true"]:hover:active 
    {
      color               : graytext;
    }
        
  button[disabled="true"] > .button-box-1 > .button-box-2 > .button-box-text,
  button[disabled="true"]:hover:active > .button-box-1 > .button-box-2 > .button-box-text
    {
      padding             : 0px 3px 1px 2px;
    }

/* text wrapping frame (hack because <text> does not support alignment) */
  .button-box-text,
  button[disabled]:focus > .button-box-1 > .button-box-2 > .button-box-text
    {
      text-align          : center;
      vertical-align      : middle;
      padding             : 0px 3px 1px 2px;
      border              : 1px solid threedface;
      margin              : 1px;
    }

  button:focus > .button-box-1 > .button-box-2 > .button-box-text
    {
      border              : 1px dotted threeddarkshadow;
    }    
    
/** Styles for "DEFAULT" buttons (usually 'OK' or equivalent in dialogs. 
 *  To activate, set 'default' attribute on button.
 **/
 
/* outer frame */  
  button[default], button:focus
    {
      border              : 1px solid threeddarkshadow;
    }

  button[default] > .button-box-1,
  button:focus > .button-box-1
    {
      border-left         : 1px solid threedhighlight;
      border-top          : 1px solid threedhighlight;
      border-right        : 1px solid threeddarkshadow;
      border-bottom       : 1px solid threeddarkshadow;
    }

  button[default] > .button-box-1 > .button-box-2,
  button:focus > .button-box-1 > .button-box-2
    {
      border-left         : 1px solid threedface;
      border-top          : 1px solid threedface;
      border-right        : 1px solid threedshadow;
      border-bottom       : 1px solid threedshadow;
    }
  
/** plain (raw) buttons, class="plain" **/
  button.plain, button.plain:hover, button.plain:hover:active,
  button.plain:hover:active > .button-internal-box,
  button.plain > .button-internal-box, 
  button.plain > .button-internal-box:hover:active,
  button.plain > .button-internal-box > .button-text-container, 
  button.plain > .button-internal-box > .button-text-container:hover:active,
  button.plain > .button-internal-box > .button-text-container > .button-text, 
  button.plain > .button-internal-box > .button-text-container > .button.text:hover:active,
  button-plain > .button-internal-box > .button-icon, 
  button.plain > .button-internal-box > .button.icon:hover:active
    {
      border              : 0px ! important;
      margin              : 0px;
      padding             : 0px;
    }

/*** class = "plain-extended" ***/
/********************************/
/* This is a dummy class that is specified in several XUL files for the sake of the
 * Macintosh Classic Skin.  This class has essentially the same behavior and styles as
 * the above <button> and accompanying styles, but is useful in the Mac Classic skin.  This is because <button>
 * styles have been completely rewritten to produce Macintosh buttons with bevels, rounded corners,
 * etc.  Plain-extended thereby functions to produce square buttons with all the same hover and active
 * effects that modern <button>'s do.
 ********************************/

  button.plain-extended {}

  .reorder-up
    {
      min-width           : 0px;
      list-style-image    : url("chrome://global/skin/scroll-up.gif");
    }    
    
  .reorder-down
    {
      min-width           : 0px;
      list-style-image    : url("chrome://global/skin/scroll-down.gif");
    }    
    
  .reorder-up > .button-internal-box > .button-icon,
  .reorder-down > .button-internal-box > .button-icon
    {
      margin              : 0;
      padding             : 0;
    }