シンプルモダンなデザインのボタンサンプル

1966 ワード
デザインパターン HTML button CSS サンプル HTML テキストリンク

以下のようなシンプルモダンなデザインのボタンをつくりたいときの
サンプルコードです。
カーソルを合わせた時の色も変化します。

  <div id="btn">ボタンを押す</div>

    #btn{
      margin: 30px auto;
      width: 180px;
      border-radius: 5px;
      box-shadow: 0 4px 0 #e91b0c;
      background: #f44336;
      color:#fff;
      cursor: pointer;
      padding: 7px;
    }
    #btn:hover{
      opacity: 0.8;
    }