title: change active state for jquery-ui button
body: <p>I am using jquery-ui 1.11.  I have a button that I would like the active state to show that the button depresses when clicked.  Using the default functionality that I copied from the jquery-ui website, the text changes color from blue to coral.  I added a shadow to the button and I would like the active state to remove the box-shadow so that it looks like the button depresses when clicked.
  This is my HTML:</p>
  
  <pre><code>&lt;div id="rotation_btn_div"&gt;
  &lt;input id="rotation_schedule_btn" type="button" value="Create Schedule" /&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>This is my jquery function:</p>
  
  <pre><code>$(function () {
     $("#rotation_schedule_btn")
      .button()
      .click(function (event) {             
       event.preventDefault();
    });
  });
  </code></pre>
  
  <p>Removing <code>.button()</code> removes the changes when the button is clicked (ie changes the text from  blue to coral). I would like to keep the text the same and just show the button as depressed when clicked.
  This is my .css:</p>
  
  <pre><code>input[type="submit"],
  input[type="button"],
  button {
      background-color: #d3dce0;
      border: 1px solid #787878;
      cursor: pointer;
      font-size: medium;
      font-weight: 600;
      padding: 7px;
      margin-right: 8px;
      width: auto;
      box-shadow: 5px 5px 5px #888888;
  }
  
  button:active {
      box-shadow: none;
  }
  </code></pre>