東京都府中市のWeb制作会社が運営するブログです。

ボタン

ボタンのデザインテンプレート一覧です。

box-shadowで内側に線を引いたボタン

  • RESULT
  • HTML
  • CSS
  • button01

  • コピー
    <p class="msr_btn11">
      <a href="#">button01</a>
    </p>
  • コピー
    .msr_btn11 a{
      width: 230px;
      padding:15px;
      color:#ffffff;
      font-size: 15px;
      line-height: 120%;
      text-align: center;
      text-decoration: none;
      background: #1B73BA;
      border: 2px solid #1B73BA;
      -webkit-box-shadow:0px 0px 0px 1px #ffffff inset;
      -moz-box-shadow:0px 0px 0px 1px #ffffff inset;
      box-shadow:0px 0px 0px 1px #ffffff inset;
      display: block;
      position:relative;
      -webkit-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      -o-transition: 0.3s ease-out;
      transition: 0.3s ease-out;
    }
    .msr_btn11 a::before{
      content: '';
      width: 6px;
      height: 6px;
      border: 0px;
      margin:0 15px 1px 0;
      border-top: solid 2px #fff;
      border-right: solid 2px #fff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      position:relative;
      display:inline-block;
      -webkit-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      -o-transition: 0.3s ease-out;
      transition: 0.3s ease-out;
    }
    .msr_btn11 a:hover{
      color:#1B73BA;
      background: #ffffff;
    }
    .msr_btn11 a:hover::before{
      border-top: solid 2px #1B73BA;
      border-right: solid 2px #1B73BA;
    }

検証済みブラウザ

  • IE10
  • Edge
  • FF
  • chrome
  • Safari

フラットなアンカーリンクリスト

  • RESULT
  • HTML
  • CSS
  • コピー
    <ul class="msr_list06 clearfix">
      <li><a href="#">button01</a></li>
      <li><a href="#">button01</a></li>
      <li><a href="#">button01</a></li>
    </ul>
  • コピー
    .msr_list06{
      margin:0 -10px;
    }
    .msr_list06 li{
      width:33.3%;
      padding:0 10px;
      display:inline-block;
      float:left;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .msr_list06 li a{
      width:100%;
      padding:18px 0;
      color:#fff;
      font-size:16px;
      background:#1B73BA;
      border:2px solid #1B73BA;
      text-decoration:none;
      text-align:center;
      display:block;
      position:relative;
      -webkit-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      -o-transition: 0.3s ease-out;
      transition: 0.3s ease-out;
    }
    .msr_list06 li a::after{
      content: '';
      width: 6px;
      height: 6px;
      border: 0px;
      border-bottom: solid 2px #fff;
      border-right: solid 2px #fff;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      bottom: 8px;
      left: 50%;
      margin-left: -3px;
      -webkit-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      -o-transition: 0.3s ease-out;
      transition: 0.3s ease-out;
    }
    .msr_list06 li a:hover{
      background:#fff;
      color:#1B73BA;
    }
    .msr_list06 li a:hover::after{
      border-bottom: solid 2px #1B73BA;
      border-right: solid 2px #1B73BA;
    }

検証済みブラウザ

  • IE10
  • Edge
  • FF
  • chrome
  • Safari

スタイリッシュなボタン02

  • RESULT
  • HTML
  • CSS
  • button02

  • コピー
    <p class="msr_btn10">
      <a href="#">button02</a>
    </p>
  • コピー
    .msr_btn10 a {
      background-color: #FFFFFF;
      border:1px solid #999999;
      color: #333333;
      display: block;
      font-size: 14px;
      padding: 14px;
      position:relative;
      text-align: center;
      text-decoration: none;
      width: 230px;
    }
    .msr_btn10 a:before {
      background:#333333;
      border-bottom:0px solid transparent;
      border-left:0px solid transparent;
      border-right:8px solid transparent;
      border-top:#FFFFFF 8px solid;
      content: "";
      display: inline-block;
      height: 0;
      right: 0;
      margin:-5px 0 0;
      position: absolute;
      bottom: 0;
      vertical-align: middle;
      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;
      width: 0;
    }
    /* マウスオーバー */
    .msr_btn10 a:hover:before {
      border-bottom:0px solid transparent;
      border-left:0px solid transparent;
      border-right:20px solid transparent;
      border-top:#FFFFFF 20px solid;
      content: "";
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

スタイリッシュなボタン

  • RESULT
  • HTML
  • CSS
  • button01

  • コピー
    <p class="msr_btn09">
      <a href="#">button01</a>
    </p>
  • コピー
    .msr_btn09 a {
      background-color: #FFFFFF;
      border:1px solid #999999;
      border-radius: 2px;
      color: #333333;
      display: block;
      font-size: 14px;
      padding: 14px;
      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;
      width: 230px;
    }
    /* マウスオーバー */
    .msr_btn09 a:hover {
      background-color: #999999;
      color: #FFFFFF;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

コミック風のボタン 02

  • RESULT
  • HTML
  • CSS
  • button02

  • コピー
    <p class="msr_btn08">
      <a href="#">button02</a>
    </p>
    
  • コピー
    .msr_btn08 a {
      background-color: #FFFFFF;
      border: 5px solid #000000;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      color: #000000;
      display: block;
      font-size: 13px;
      padding: 20px 20px 20px 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;
      width: 250px;
    }
    /* 黒の三角形 */
    .msr_btn08 a:before {
      border: 6px solid transparent;
      border-left: 6px solid #000000;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      content: "";
      display: inline-block;
      height: 12px;
      left: 15px;
      margin:-6px 0 0;
      position: absolute;
      top: 50%;
      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;
      vertical-align: middle;
      width: 6px;
    }
    /* マウスオーバー */
    .msr_btn08 a:hover {
      background-color: #000000;
      color: #FFFFFF;
    }
    .msr_btn08 a:hover:before {
      border-left: 6px solid #FFFFFF;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome

コミック風のボタン

  • RESULT
  • HTML
  • CSS
  • button01

  • コピー
    <p class="msr_btn07">
      <a href="#">button01</a>
    </p>
  • コピー
    .msr_btn07 a {
      background-color: #000000;
      box-sizing: border-box;
      color: #FFFFFF;
      font-size: 13px;
      display: block;
      padding: 20px;
      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;
      width: 250px;
    }
    /* 白の三角形 */
    .msr_btn07 a:before {
      border: 4px solid transparent;
      border-left: 4px solid #FFFFFF;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      content: "";
      display: inline-block;
      margin:0 4px 0 0;
      height: 8px;
      width: 4px;
      vertical-align:0px;
    }
    /* マウスオーバー */
    .msr_btn07 a:hover {
      background-color: #444444;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome

マテリアルなボタン 02

  • RESULT
  • HTML
  • CSS
  • button02

  • コピー
    <p class="msr_btn06">
      <a href="#">button02</a>
    </p>
  • コピー
    .msr_btn06 a {
      background-color: #F8F8F8;
      border-radius: 3px;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      box-sizing: border-box;
      color: #1B73BA;
      display: block;
      font-size: 13px;
      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;
      width: 230px;
    }
    .msr_btn06 a:before {
      background-image: url(/stylerecipe_img/material_arrow_blue01.png);
      background-repeat: no-repeat;
      box-sizing: border-box;
      content: "";
      display: inline-block;
      height: 10px;
      left: 15px;
      margin:-5px 0 0;
      position: absolute;
      top: 50%;
      vertical-align: middle;
      width: 6px;
    }
    /* マウスオーバー */
    .msr_btn06 a:hover {
      background-color: #daecfa;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari

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

マテリアルなボタン

  • RESULT
  • HTML
  • CSS
  • button01

  • コピー
    <p class="msr_btn05">
      <a href="#">button01</a>
    </p>
  • コピー
    .msr_btn05 {
      border-radius: 3px;
      box-sizing: border-box;
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      width: 230px;
    }
    .msr_btn05 a {
      background-color: #1B73BA;
      border-radius: 3px;
      color: #FFFFFF;
      display: block;
      font-size: 13px;
      padding: 13px 10px;
      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_btn05 a:before {
      background-image: url(/stylerecipe_img/material_arrow_white01.png);
      background-repeat: no-repeat;
      box-sizing: border-box;
      content: "";
      display: inline-block;
      height: 10px;
      margin-right: 10px;
      vertical-align:0px;
      width: 6px;
    }
    /* マウスオーバー */
    .msr_btn05 a:hover {
      background-color: #469de4;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari

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

フラットなボタン 02

  • RESULT
  • HTML
  • CSS
  • button02

  • コピー
    <p class="msr_btn04">
      <a href="#">button02</a>
    </p>
  • コピー
    .msr_btn04 a {
      background-color: #FFFFFF;
      border: 2px solid #1B73BA;
      border-radius: 3px;
      box-sizing: border-box;
      color: #1B73BA;
      display: block;
      font-size: 13px;
      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;
      width: 230px;
    }
    
    /* 青の三角形 */
    .msr_btn04 a:before {
      border: 6px solid transparent;
      border-left: 6px solid #1B73BA;
      box-sizing: border-box;
      content: "";
      display: inline-block;
      height: 12px;
      left: 15px;
      margin:-6px 0 0;
      position: absolute;
      top: 50%;
      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;
      vertical-align: middle;
      width: 6px;
    }
    
    /* マウスオーバー */
    .msr_btn04 a:hover {
      color: #FFFFFF;
      background:#1B73BA;
    }
    .msr_btn04 a:hover:before {
      border-left: 6px solid #FFFFFF;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari

フラットなボタン

  • RESULT
  • HTML
  • CSS
  • button01

  • コピー
    <p class="msr_btn03">
      <a href="#">button01</a>
    </p>
  • コピー
    .msr_btn03 {
      border-radius: 3px;
      box-sizing: border-box;
      width: 230px;
    }
    .msr_btn03 a {
      background-color: #1B73BA;
      border-radius: 3px;
      color: #FFFFFF;
      font-size: 13px;
      display: block;
      padding: 13px 10px;
      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_btn03 a:before {
      border: 4px solid transparent;
      border-left: 4px solid #FFFFFF;
      box-sizing: border-box;
      content: "";
      display: inline-block;
      height: 8px;
      margin:0 4px 0 0;
      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;
      width: 4px;
      vertical-align:0px;
    }
    
    /* マウスオーバー */
    .msr_btn03 a:hover {
      background-color: #F0F0F0;
      color: #1B73BA;
    }
    .msr_btn03 a:hover:before {
      border-left: 4px solid #1B73BA;
    }

検証済みブラウザ

  • IE9
  • IE10
  • Edge
  • FF
  • chrome
  • Safari

無難なボタン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

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

無難なボタン

  • RESULT
  • HTML
  • CSS
  • button01

  • コピー
    <p class="msr_btn01">
      <a href="#">button01</a>
    </p>
  • コピー
    .msr_btn01 {
      border: 1px solid #AAAAAA;
      border-radius: 3px;
      box-sizing: border-box;
      width: 230px;
    }
    .msr_btn01 a {
      background: linear-gradient(#FEFEFE, #F3F5F5);
      background: -o-linear-gradient(#FEFEFE, #F3F5F5);
      background: -ms-linear-gradient(#FEFEFE, #F3F5F5);
      background: -moz-linear-gradient(#FEFEFE, #F3F5F5);
      background: -webkit-linear-gradient(#FEFEFE, #F3F5F5);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #F3F5F5), color-stop(0.00, #FEFEFE));
      border: 1px solid #fff;
      border-radius: 3px;
      color: #000000;
      display: block;
      font-size: 13px;
      font-weight: bold;
      padding: 13px 10px;
      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_btn01 a:hover {
      opacity: 0.6;
    }
    .msr_btn01 a:before {
      background-image: url(/stylerecipe_img/arrow_blue.png);
      background-repeat: no-repeat;
      content: "";
      display: block;
      display: inline-block;
      height: 12px;
      padding: 0 10px 2px 0;
      vertical-align: middle;
      width: 6px;
    }

検証済みブラウザ

  • IE10
  • Edge
  • FF
  • chrome
  • Safari

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

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