Edit in JSFiddle

<article>
      <p>
        <a href="#" class="btn">Кнопка</a>
        <button>Кнопка</button>
        <input type="submit" value="Кнопка">
      </p>   
      <p>
        <a href="#" class="btn btn_blue">Кнопка</a>
        <button class="btn_blue">Кнопка</button>
        <input class="btn_blue" type="submit" value="Кнопка">
      </p>   
      <p>
        <a href="#" class="btn btn_red">Кнопка</a>
        <button class="btn_red">Кнопка</button>
        <input class="btn_red" type="submit" value="Кнопка">
	  </p>
      <p>
        <a href="#" class="btn btn_green">Кнопка</a>
        <button class="btn_green">Кнопка</button>
        <input class="btn_green" type="submit" value="Кнопка">
	  </p>   
</article>
    	

/* Базовые стили кнопок */
.btn, input[type="submit"], button {
    background: #f1f1f1;
    background-image: -webkit-linear-gradient(top, #fcfcfc, #e0e0e0);
    background-image: -moz-linear-gradient(top, #fcfcfc, #e0e0e0);
    background-image: -ms-linear-gradient(top, #fcfcfc, #e0e0e0);
    background-image: -o-linear-gradient(top, #fcfcfc, #e0e0e0);
    background-image: linear-gradient(to bottom, #fcfcfc, #e0e0e0);
    -webkit-border-radius: 3;
    -moz-border-radius: 3;
    border-radius: 3px;
    font-family: Arial;
    color: #444;
    font-size: 13px;
    padding: 10px 23px 10px 23px;
    border: solid #B3B3B3 1px;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}
    
.btn:hover, input[type="submit"]:hover, button:hover,
.btn:active, input[type="submit"]:active, button:active {
    background: #fcfcfc;
    background-image: -webkit-linear-gradient(top, #fcfcfc, #d0d0d0);
    background-image: -moz-linear-gradient(top, #fcfcfc, #d0d0d0);
    background-image: -ms-linear-gradient(top, #fcfcfc, #d0d0d0);
    background-image: -o-linear-gradient(top, #fcfcfc, #d0d0d0);
    background-image: linear-gradient(to bottom, #fcfcfc, #d0d0d0);
    text-decoration: none;
}
    
.btn:active, input[type="submit"]:active, button:active {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        }
/* Синие Кнопки */
.btn_blue, input[type="submit"].btn_blue, button.btn_blue{
    background: #0aa0c6;
    background-image: -webkit-linear-gradient(top, #0aa0c6, #0788a8);
    background-image: -moz-linear-gradient(top, #0aa0c6, #0788a8);
    background-image: -ms-linear-gradient(top, #0aa0c6, #0788a8);
    background-image: -o-linear-gradient(top, #0aa0c6, #0788a8);
    background-image: linear-gradient(to bottom, #0aa0c6, #0788a8);
    border: solid #0788a8 1px;
    color: #ffffff;
}
    
.btn_blue:hover, input[type="submit"].btn_blue:hover, button.btn_blue:hover,
.btn_blue:active, input[type="submit"].btn_blue:active, button.btn_blue:active {
    background: #0badd6;
    background-image: -webkit-linear-gradient(top, #0badd6, #0693b3);
    background-image: -moz-linear-gradient(top, #0badd6, #0693b3);
    background-image: -ms-linear-gradient(top, #0badd6, #0693b3);
    background-image: -o-linear-gradient(top, #0badd6, #0693b3);
    background-image: linear-gradient(to bottom, #0badd6, #0693b3);
}
 /* Красные кнопки */       
.btn_red, input[type="submit"].btn_red, button.btn_red {
    background: #de3229;
    background-image: -webkit-linear-gradient(top, #de3229, #b52922);
    background-image: -moz-linear-gradient(top, #de3229, #b52922);
    background-image: -ms-linear-gradient(top, #de3229, #b52922);
    background-image: -o-linear-gradient(top, #de3229, #b52922);
    background-image: linear-gradient(to bottom, #de3229, #b52922);
    border: solid #b52922 1px;
    color: #ffffff;
}
/* свойства для красных кнопок при наведении и активации */  
.btn_red:hover, input[type="submit"].btn_red:hover, button.btn_red:hover,
.btn_red:active, input[type="submit"].btn_red:active, button.btn_red:active {
    background: #eb3a34;
    background-image: -webkit-linear-gradient(top, #eb3a34, #c22e29);
    background-image: -moz-linear-gradient(top, #eb3a34, #c22e29);
    background-image: -ms-linear-gradient(top, #eb3a34, #c22e29);
    background-image: -o-linear-gradient(top, #eb3a34, #c22e29);
    background-image: linear-gradient(to bottom, #eb3a34, #c22e29);
}
/* Зелёные кнопки */    
.btn_green, input[type="submit"].btn_green, button.btn_green {
    background: #10ad47;
    background-image: -webkit-linear-gradient(top, #10ad47, #0f943d);
    background-image: -moz-linear-gradient(top, #10ad47, #0f943d);
    background-image: -ms-linear-gradient(top, #10ad47, #0f943d);
    background-image: -o-linear-gradient(top, #10ad47, #0f943d);
    background-image: linear-gradient(to bottom, #10ad47, #0f943d);
    border: solid #0f943e 1px;
    color: #ffffff;
}
/* свойства для зелёных кнопок при наведении и активации */    
.btn_green:hover, input[type="submit"].btn_green:hover, button.btn_green:hover,
.btn_green:active, input[type="submit"].btn_green:active, button.btn_green:active {
    background: #15bf4e;
    background-image: -webkit-linear-gradient(top, #15bf4e, #10a343);
    background-image: -moz-linear-gradient(top, #15bf4e, #10a343);
    background-image: -ms-linear-gradient(top, #15bf4e, #10a343);
    background-image: -o-linear-gradient(top, #15bf4e, #10a343);
    background-image: linear-gradient(to bottom, #15bf4e, #10a343);
}