A Pen by osamingo.

A-Pen-by-osamingo.markdown

A Pen by osamingo

A Pen by osamingo on CodePen.

License.

index.html

<a class="button button--primary">ボタン</a>
<a class="button button--alert mt10">ボタン</a>

style.css

.button {
  display       : block;
  padding-top   : 5px;
  padding-bottom: 5px;
  border-radius : 5px;
  text-align    : center;
}

.button--primary {
  background : -webkit-linear-gradient(top, #009C50, #008E42);
  color      : #fff;
  text-shadow: 0px -1px 1px #000000;
}
.button--primary:hover {
  background: -webkit-linear-gradient(top, #008E42, #009C50);
}

.button--alert {
  background : #A7182E;
  color      : #fff;
  text-shadow: 0px -1px 1px #000000;
  box-shadow : 1px 2px 1px 0px #B74653 inset;
  -moz-box-shadow   : 1px 2px 1px 0px #B74653 inset;
  -webkit-box-shadow: 1px 2px 1px 0px #B74653 inset;
  -o-box-shadow     : 1px 2px 1px 0px #B74653 inset;
  -ms-box-shadow    : 1px 2px 1px 0px #B74653 inset;
}

.mt10 {
  margin-top: 10px;
}