背景埋め込み型ボタン

つくった

CSS3の勉強がてらボタンを作ってjsdoitに置いた。
背景埋め込み型ボタン :jsdoit

背景に埋めこまれてる感じのボタン作った。
overflow: hidden; 代用したい。

ブラウザちぇっく。

• Opera 12.14
• Google Chrome 25.0.1364.155
• Safari 6.0.2
• Firefox 19.0

Code

HTML

  <div class="bg">
  <h2>Embedded Button.</h2>
    <div class="box">
      <a href="" class="btn">Button</a>
    </div>
    <hr />
    <h2>Hover State and Active State.</h2>
    <!-- hover sample -->
    <div class="box side_by_side">
      <a href="" class="btn_hover">Button</a>
    </div>
    <!-- active sample -->
    <div class="box">
      <a href="" class="btn_active">Button</a>
    </div>
  </div>

CSS

.box {
  background-image: -webkit-linear-gradient(top, #B3250F, #DF4D33);
  background-image: -moz-linear-gradient(top, #B3250F, #DF4D33);
  background-image: -o-linear-gradient(top, #B3250F, #DF4D33);
  background-image: linear-gradient(top, #B3250F, #DF4D33);
  border-radius: 6px;
  overflow: hidden;
  padding: 2px;
  width: 200px;
}

.btn {
  background: #E8583C;
  background-image: -webkit-linear-gradient(top, #E8583C 50%, #CA2814 50%);
  background-image: -moz-linear-gradient(top, #E8583C 50%, #CA2814 50%);
  background-image: -o-linear-gradient(top, #E8583C 50%, #CA2814 50%);
  background-image: linear-gradient(top, #E8583C 50%, #CA2814 50%);
  border: 2px solid #8E1107;
  -webkit-box-shadow: inset rgba(255,255,255,0.15) 0 0 0 1px;
  -moz-box-shadow: inset rgba(255,255,255,0.15) 0 0 0 1px;
  box-shadow: inset rgba(255,255,255,0.15) 0 0 0 1px;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-weight: bold;
  overflow: hidden;
  padding: 3px 6px;
  text-align: center;
  text-shadow: 0 -2px 0 rgba(0,0,0,0.5);
  text-decoration: none;
}

.btn:hover {
  background: #E84C2C;
  background-image: -webkit-linear-gradient(top, #E84C2C 50%, #CA2814 50%);
  background-image: -moz-linear-gradient(top, #E84C2C 50%, #CA2814 50%);
  background-image: -o-linear-gradient(top, #E84C2C 50%, #CA2814 50%);
  background-image: linear-gradient(top, #E84C2C 50%, #CA2814 50%);
}

.btn:active {
  background: #A30402;
  background-image: -webkit-linear-gradient(top, #A30402 10%, #E44121 100%);
  background-image: -moz-linear-gradient(top, #A30402 10%, #E44121 100%);
  background-image: -o-linear-gradient(top, #A30402 10%, #E44121 100%);
  background-image: linear-gradient(top, #A30402 10%, #E44121 100%);
}