ボタン基本スタイル
ボタンの基本スタイルです。 各ブレイクポイントでインラインボタンからブロックボタンに切り替わります。 View 基本 button xsでブロックボタン 基本 button smでブロックボタン 基本 button md…
3@TECH BLOG
コピペで使えるWebパーツのネタやスタッフブログなど
カテゴリー: ボタン
遷移ボタン
sun@flexを使用した遷移ボタンのスニペット デモ Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <p>buttonBox 基本並び（float:left）</p> <div class="buttonBox"> <ul class="flex row"> <li class="col-xs-12 col-sm-6"><a class="button prev">戻る</a></li> <li class="col-xs-12 col-sm-6"><a class="button next">進む</a></li> </ul> </div> <hr> <p>buttonBox 逆並び（float:right）</p> <div class="buttonBox"> <ul class="flex row reverse"> <li class="col-xs-12 col-sm-6"><a class="button next">進む</a></li> <li class="col-xs-12 col-sm-6"><a class="button prev">戻る</a></li> </ul> </div> <hr> <p>buttonBox center配置（ボタンx2）</p> <ul class="caption"> <li>※.row の max-width を設定</li> </ul> <hr> <div class="buttonBox center"> <ul class="flex row"> <li class="col-xs-12 col-sm-6"><a class="button next">進む</a></li> <li class="col-xs-12 col-sm-6"><a class="button prev">戻る</a></li> </ul> </div> <hr> <p>buttonBox center配置（ボタンx1）</p> <ul class="caption"> <li>※.row幅は x2 の半分</li> </ul> <div class="buttonBox center single"> <ul class="flex row"> <li class="col-xs-12"><a class="button">進む</a></li> </ul> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | /* ==================================================== ボタンボックス ==================================================== */ .buttonBox { text-align: center; } .buttonBox p { text-align: center; } .buttonBox li .button { display: block; padding: 0.75em; } .buttonBox.center .row { display: inline-flex; width: 103%; max-width: 500px; } .buttonBox.center.single .row { max-width: 250px; } @media print, screen and (max-width: 767px) { .buttonBox > .row > .col-xs-12 { margin-top: 0.25em; margin-bottom: 0.25em; } } @media print, screen and (max-width: 991px) { .buttonBox > .row > .col-sm-12 { margin-top: 0.25em; margin-bottom: 0.25em; } } @media screen and (max-width: 1199px) { .buttonBox > .row > .col-md-12 { margin-top: 0.25em; margin-bottom: 0.25em; } } @media screen and (max-width: 9999px) { .buttonBox > .row > .col-lg-12 { margin-top: 0.25em; margin-bottom: 0.25em; } } |
[crayon-6…
