title: Change button:active in css
body: <p>how i can change button to have border-radius: 6px; and to by active marked when i will select it. Here is my HTML code and i also have CSS. When i make <code>&lt;button class:active</code>  i get only active button without css style</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div align="center"&gt;
       &lt;label&gt;Period selection&lt;/label&gt;
       &lt;button class="button: active" id="Day" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('1');"&gt;Day&lt;/button&gt;
       &lt;button class="button: active" id="Week" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('2');"&gt;Week&lt;/button&gt;
       &lt;button class="button: active" id="Month" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('3');"&gt;Month&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.ctButton,
  .button,
  body div.ui-dialog div.ui-dialog-buttonpane div.ui-dialog-buttonset button.ui-button,
  .ui-dialog .ui-button, 
  a.button,
  #ctPageContent a.button,
  #ctPageContent a.button:hover {
       background-color: #2B2B2B;
       border: 0px;
       display: inline-block;
       padding: 3px 10px 4px;
       color: #fff;
       text-decoration: none;
       -moz-border-radius: 6px;
       -webkit-border-radius: 6px;
       border-radius: 6px;
       -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
       -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
       text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
       border-bottom: 1px solid rgba(0,0,0,0.25);
       position: relative;
       cursor: pointer;
       margin: 4px 2px;
  }
  </code></pre>