buttons

by karin

HTML

<button class="btn">button</button>
<button class="btn" type="button" disabled>button</button>
<button class="btn-lrg">Large</button>
<button class="btn-lrg-blue">Large blue</button>

CSS

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none; 
  border: 1px solid #ddd;
  color:#4f81bd;
  white-space: nowrap;
    padding:2px 12px;
    font-size:14px;
    line-height:1.7;
    border-radius: 3px;
    background:#efefef;
  }

.btn:hover,
.btn:focus {
    color: #333;
    text-decoration: none;
    border: 1px solid #CFCFCF;
}
  .btn:active,
  .btn.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  }

  .btn.disabled,
  .btn.disabled:hover,   
  .btn[disabled],
  .btn[disabled]:hover{
    cursor: not-allowed;
    border: 1px solid #CFCFCF;
  }

.btn-lrg {
  display: inline-block;
  margin-bottom: 0;
  margin-right:2px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none; 
  border: 1px solid #414141;
  color:#3F95FC;
  white-space: nowrap;
    padding:3px 14px;
    font-size:16px;
    line-height:2;
    border-radius: 3px;
    background:#414141;
  }

.btn-lrg:hover,
.btn-lrg:focus {
    color: #3F95FC;
    text-decoration: none;
    border: 1px solid #3F95FC;
}
  .btn-lrg:active,
  .btn-lrg.active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  }

  .btn-lrg.disabled,
  .btn-lrg.disabled:hover,   
  .btn-lrg[disabled],
  .btn-lrg[disabled]:hover{
    cursor: not-allowed;
    border: 1px solid #CFCFCF;
  }

.btn-lrg-blue {
  display: inline-block;
  margin-bottom: 0;
  margin-right:2px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none; 
  border: 1px solid #414141;
  color:#eee;
  white-space: nowrap;
    padding:3px 14px;
    font-size:16px;
    line-height:2;
    border-radius: 3px;
    background:#385B85;
  }

.btn-lrg-blue :hover,
.btn-lrg-blue :focus {
    color: #eee;
    text-decoration: none;
    border:...

JavaScript

414141