Change button:active in css - html

Question

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 <button class:active i get only active button without css style
<div align="center">
<label>Period selection</label>
<button class="button: active" id="Day" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('1');">Day</button>
<button class="button: active" id="Week" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('2');">Week</button>
<button class="button: active" id="Month" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('3');">Month</button>
</div>
.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;
}

Answer 1

The : indicates a pseudo-class (pr pseudo-element). It is not part of the class name.
:active means "While being clicked on" (or otherwise activated).
If you want to match a class in the document, then give it a regular class name (and preferably not one that could be confused with a pseudo-class):
<button class="current"
Then use a class selector in the CSS:
.current { ... }

Answer 2

Add this to your css
.button:active{
border-radius: 6px;
}
In your html just add the below code.
NOTE- :active :hover should be in your css, not in your class attribute. Hence remove :active from your class attribute as below
<div align="center">
<label>
Period selection </label>
<button class="button" id="Day" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('1') ;">
Day</button>
<button class="button" id="Week" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('2') ;">
Week</button>
<button class="button" id="Month" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('3') ;">
Month</button>
</div>

Answer 3

change
class="button:active"
to
class="button"
and add to your css
button:active {
// your button:active styling
}

Answer 4

In CSS, colons have a special meaning: they introduce pseudo-classes.
Therefore, if you want to select the following HTML by its class...
<button class="button:active"></button>
...you must escape the colon:
.button\:active
.button\:active {
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;
}
<button class="button:active">Button</button>