東京都府中市のWEB制作会社Maromaroのブログです

無難なボタン02

  • RESULT
  • HTML
  • CSS
  • button02

  • コピー
    <p class="msr_btn02">
      <a href="#">button02</a>
    </p>
  • コピー
    .msr_btn02 {
      border: 1px solid #1B73BA;
      border-radius: 3px;
      box-sizing: border-box;
      width: 230px;
    }
    .msr_btn02 a {
      background: linear-gradient(#1F85D8, #17619C);
      background: -o-linear-gradient(#1F85D8, #17619C);
      background: -ms-linear-gradient(#1F85D8, #17619C);
      background: -moz-linear-gradient(#1F85D8, #17619C);
      background: -webkit-linear-gradient(#1F85D8, #17619C);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #17619C), color-stop(0.00, #1F85D8));
      border: 1px solid #fff;
      border-radius: 3px;
      color: #fff;
      font-size: 13px;
      font-weight: bold;
      display: block;
      padding: 13px 10px 13px 30px;
      position: relative;
      text-align: center;
      text-decoration: none;
      transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -webkit-transition: 0.2s ease-in-out;
    }
    .msr_btn02 a:hover {
      opacity: 0.6;
    }
    .msr_btn02 a:before {
      background-image: url(/stylerecipe_img/arrow_white.png);
      background-repeat: no-repeat;
      content: "";
      display: block;
      height: 12px;
      left: 15px;
      margin:-6px 0 0 0;
      position: absolute;
      top: 50%;
      width: 6px;
    }

検証済みブラウザ

  • IE10
  • Edge
  • FF
  • chrome
  • Safari

画像へのパスは任意のものに書き換えてください!
使用している画像はこちら

  • このエントリーをはてなブックマークに追加

その他のボタン

ボタンの一覧をもっと見る

要素一覧