ボタンの基本スタイルです。
各ブレイクポイントでインラインボタンからブロックボタンに切り替わります。
View
xsでブロックボタン
smでブロックボタン
mdでブロックボタン
lgでブロックボタン
Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class="button">基本</div> <input class="button" type="button" name="" value="input"> <button class="button" name="" value="">button</button> <hr> <p>xsでブロックボタン</p> <div class="button xs-block">基本</div> <input class="button xs-block" type="button" name="" value="input"> <button class="button xs-block" name="" value="">button</button> <hr> <p>smでブロックボタン</p> <div class="button sm-block">基本</div> <input class="button sm-block" type="button" name="" value="input"> <button class="button sm-block" name="" value="">button</button> <hr> <p>mdでブロックボタン</p> <div class="button md-block">基本</div> <input class="button md-block" type="button" name="" value="input"> <button class="button md-block" name="" value="">button</button> <hr> <p>lgでブロックボタン</p> <div class="button lg-block">基本</div> <input class="button lg-block" type="button" name="" value="input"> <button class="button lg-block" name="" value="">button</button> |
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | /* ==================================================== ボタンスタイル ==================================================== */ .button { -webkit-appearance: none; box-shadow: 1px 0 2px rgba(0, 0, 0, 0.05); border-radius: 3px; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%); line-height: 1; vertical-align: middle; text-decoration: none; text-align: center; font-size: 14px; font-weight: normal; font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; color: #555555; cursor: pointer; display: inline-block; position: relative; border: none; padding: 0.5em 1em; } .button:hover { box-shadow: 1px 0 1px rgba(0, 0, 0, 0.2); } .button:active { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%); } @media print, screen and (max-width: 767px) { .button.xs-block { display: block; width: 100%; margin: 1em 0; padding: 0.75em 1em; } } @media print, screen and (max-width: 991px) { .button.sm-block { display: block; width: 100%; margin: 1em 0; padding: 0.75em 1em; } } @media screen and (max-width: 1199px) { .button.md-block { display: block; width: 100%; margin: 1em 0; padding: 0.75em 1em; } } @media screen and (max-width: 9999px) { .button.lg-block { display: block; width: 100%; margin: 1em 0; padding: 0.75em 1em; } } /* ==================================================== ボタンボックス ==================================================== */ .buttonBox { text-align: center; } .buttonBox p { text-align: center; } .buttonBox li .button { display: block; padding: 0.75em; } .buttonBox.center .row { display: inline-block; width: 103%; max-width: 768px; } .buttonBox.center.single .row { max-width: 384px; } @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; } } |
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | /* ==================================================== ボタンスタイル ==================================================== */ //基本スタイル @mixin basic_style { -webkit-appearance: none; box-shadow:1px 1px 1px rgba(0,0,0,0.05); border-radius:3px; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1)0%, rgba(0, 0, 0, 0.2) 100%); line-height:1; vertical-align: middle; text-decoration: none; text-align:center; font-size:$base_text_size; font-weight:normal; font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; color:#000000; cursor: pointer; } //PC余白 $button_padding_pc: 0.5em 1em; //SP余白 $button_padding_sp: 0.75em 1em; /* ==================================================== ボタンスタイル ==================================================== */ .button { @include basic_style; display: inline-block; position: relative; border: none; padding:$button_padding_pc; &:hover { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } &:active { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2)0%, rgba(0, 0, 0, 0.1) 100%); } } @media print, screen and (max-width: 767px) { .button.xs-block { display: block; width: 100%; margin: 1em 0; padding:$button_padding_sp; } } @media print, screen and (max-width: 991px) { .button.sm-block { display: block; width: 100%; margin: 1em 0; padding:$button_padding_sp; } } @media screen and (max-width: 1199px) { .button.md-block { display: block; width: 100%; margin: 1em 0; padding:$button_padding_sp; } } @media screen and (max-width: 9999px) { .button.lg-block { display: block; width: 100%; margin: 1em 0; padding:$button_padding_sp; } } |