遷移ボタン
sun@flexを使用した遷移ボタンのスニペット デモ
Source
buttonBox 基本並び（float:left）
HTML
HTML
HTML
buttonBox 逆並び（float:right）
HTML
HTML
HTML
buttonBox center配置（ボタンx2）
HTML
- ※.row の max-width を設定
HTML
HTML
HTML
HTML
buttonBox center配置（ボタンx1）
HTML
- ※.row幅は x2 の半分
HTML
HTML
CSS
/* ====================================================
ボタンボックス
==================================================== */
.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;
}
}SCSS
/* ====================================================
ボタンボックス
==================================================== */
//buttonBox 最大幅
$buttonBox_maxWidth: 500px;
.buttonBox {
text-align:center;
p {
text-align:center;
}
li {
.button {
display:block;
padding:0.75em;
}
}
&.center .row {
display:inline-block;
width:103%;
max-width:$buttonBox_maxWidth;
}
&.center.single .row {
max-width:$buttonBox_maxWidth / 2;
}
}
@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;
}
}
