.button {
  position: relative;
  border-radius: 4px;
  line-height: 50px;
  text-decoration: none;
  font-size:18px;
  padding:0.5em 2em;
}
.button:active {
  /*bottom: -4px;
  margin-bottom: 4px;*/
  border: none;
  box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
/*色属性は別のクラスを作成*/

/*クラスcol-pink　ピンク色*/
.col-pink {
  border:1px solid #f56778;
  color: #fff;
  text-shadow: 0px 1px 0px #f56778;
  border-bottom: 4px solid #cb5462;
  background-color: #f56778;
  background: -webkit-linear-gradient(top, #f997b0, #f56778);
  background: -moz-linear-gradient(top,  #f997b0,  #f56778);
  background: linear-gradient(to bottom, #f997b0, #f56778);
  box-shadow: inset 1px 1px 0 #fbc1d0,
              inset -1px 0px 0 #fbc1d0;
}
.col-pink:hover {
  background: #f56778;
  background: -webkit-linear-gradient(top, #f56778, #f997b0);
  background: -moz-linear-gradient(top,  #f56778,  #f997b0);
  background: linear-gradient(to bottom, #f56778, #f997b0);
  color: #913944;
  text-shadow: 0px 1px 0px #f9a0ad;
}

/*クラスcol-lightgray 深灰色*/
.col-lightgray {
  border:1px solid #888888;
  color: #fff;
  text-shadow: 0px 1px 0px #888888;
  border-bottom: 4px solid #777777;
  background-color: #888888;
  background: -webkit-linear-gradient(top, #DDDDDD, #AAAAAA);
  background: -moz-linear-gradient(top,  #DDDDDD,  #AAAAAA);
  background: linear-gradient(to bottom, #DDDDDD, #AAAAAA);
  box-shadow: inset 1px 1px 0 #EEEEEE,
              inset -1px 0px 0 #EEEEEE;
}
.col-lightgray:hover {
  background: #888888;
  background: -webkit-linear-gradient(top, #AAAAAA, #DDDDDD);
  background: -moz-linear-gradient(top,  #AAAAAA,  #DDDDDD);
  background: linear-gradient(to bottom, #AAAAAA, #DDDDDD);
  color: #666666;
  text-shadow: 0px 1px 0px #DDDDDD;
}