CSS Buttons Common Three Rules

Login

Submit

Reset

Please use simple three steps to create your website buttons.
You don't need to use same property again and again for different buttons.

1. Create your your first button class name with all required properties [.Button].
2. Create another class for size [.Small, .Medium, .Large]
3. Create class for Background and Text Color [Red, Blue, Gray]

How to use your classes to create buttons?

See code below:

CSS Code:

<style type="text/css">
/* Common Properties for all Buttons */
  .button {
  background: #00a6fc;
  display: inline-block;
  text-align: center;
  padding: 9px 34px 11px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px; font-size: 1.3rem;
  line-height: 1;
  font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
  position: relative;
  cursor: pointer;
  border: none;
  outline: none;
  margin: 0;
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
  border: 1px solid #0593dc;
  -webkit-transition: background-color .15s ease-in-out;
  -moz-transition: background-color .15s ease-in-out;
  -o-transition: background-color .15s ease-in-out;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  }
/* Buttons Sizes ---------- */
  .small.button             { font-size: 11px; padding: 8px 20px 10px; width: auto; }
  .large.button             { font-size: 18px; padding: 11px 48px 13px; width: auto; }
.nice.small.button         { background-position: 0 -34px; }
  .nice.large.button         { background-position: 0 -30px; }
/* Colors ---------- */
  .red.button                { background-color: #e91c21; border: 1px solid #c60000; }
  .white.button            { background-color: #e9e9e9; color: #333; border: 1px solid #cccccc; }
  .blue.button            { background-color: #005fc9; }
.nice.red.button        { border: 1px solid #b90b0b; }
  .nice.white.button        { border: 1px solid #cacaca; text-shadow: none !important; }
  .nice.blue.button        { border: 1px solid #005fc9; }
/* Hovers ---------- */
  .button:hover, .button:focus                 { background-color: #0192dd; color: #fff; }
  .red.button:hover, .red.button:focus         { background-color: #d01217; }
  .white.button:hover, .white.button:focus    { background-color: #dadada; color: #333; }
  .blue.button:hover, .blue.button:focus        { background-color: #0274f4; }
/* Active ---------- */
  .nice.button:active     {
  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.15);
  }
</style>

HTML Code:

<div class="six columns">
<p><a class="small red button" href="#">Login</a></p>
<p><a class="blue button" href="#">Submit</a></p>
<p><a class="large white button" href="#">Reset</a></p>
</div>