echo-buttons
.echo-button
を、中央寄せで繰り返すための領域を作成する。 div, ul
でマークアップできる。
ボタンの数は、1個から4個を前提としている。
(breakpoint)が md
以下で最大2カラム、 lg
以上で最大4カラムとなる。
.echo-button-item
の最大幅は .echo-container-sm
と同じ領域幅を、ボタンの数で均等に割ったものとなる。
Internet Explorer 11で段組にならない不具合について
ボタン1個
ボタン2個
ボタン3個
ボタンの高さが異なる場合は縦中央揃えとなる。
ボタン4個(ulでマークアップ)
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm">ボタン1個</p>
<div class="echo-buttons echo-buttons-grow">
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-b echo-button-icon-arrow">ボタン</a>
</div><!-- /.echo-buttons-item -->
</div><!-- /.echo-buttons -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm echo-margin-top-lg">ボタン2個</p>
<div class="echo-buttons">
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-b echo-button-icon-arrow">ボタン</a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-a">ボタンの文字数が多い</a>
</div><!-- /.echo-buttons-item -->
</div><!-- /.echo-buttons -->
<div class="echo-buttons echo-margin-top-lg">
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-style-a">ボタンの文字数が多い</a>
</div><!-- /.echo-buttons-item -->
</div><!-- /.echo-buttons -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm echo-margin-top-lg">ボタン3個</p>
<div class="echo-buttons">
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-b echo-button-icon-arrow">ボタン</a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-b">ボタン</a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-a">ボタンの文字数が多い</a>
</div><!-- /.echo-buttons-item -->
</div><!-- /.echo-buttons -->
<p class="echo-margin-top-lg echo-text-center">ボタンの高さが異なる場合は縦中央揃えとなる。</p>
<div class="echo-buttons">
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">ボタン</a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-b">ボタン</a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-a">ボタンの文字数が多い</a>
</div><!-- /.echo-buttons-item -->
</div><!-- /.echo-buttons -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm echo-margin-top-lg">ボタン4個(ulでマークアップ)</p>
<ul class="echo-buttons">
<li class="echo-buttons-item">
<a href="#" class="echo-button echo-button-lg echo-button-style-b echo-button-icon-arrow">ボタン</a>
</li><!-- /.echo-buttons-item -->
<li class="echo-buttons-item">
<a href="#" class="echo-button echo-button-lg echo-button-style-b">ボタン</a>
</li><!-- /.echo-buttons-item -->
<li class="echo-buttons-item">
<a href="#" class="echo-button echo-button-lg echo-button-style-a">ボタンの文字数が多い</a>
</li><!-- /.echo-buttons-item -->
<li class="echo-buttons-item">
<a href="#" class="echo-button echo-button-lg echo-button-style-a">ボタン</a>
</li><!-- /.echo-buttons-item -->
</ul><!-- /.echo-buttons -->
sub class echo-buttons-grow
.echo-buttons
に付与すると、最後の .echo-buttons-item
の幅が200%になる。
ボタンの数が2個、もしくは3個を前提としている。
ボタンの数が1個の場合は何も起きない。4個の場合はボタンの幅が狭くなるため、ラベルをアイコンにする等の考慮が必要となる。
ボタン1個
ボタン2個
ボタン3個
ボタン4個
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm">ボタン1個</p>
<div class="echo-buttons echo-buttons-grow">
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-b echo-button-icon-arrow">ボタン</a>
</div><!-- /.echo-buttons-item -->
</div><!-- /.echo-buttons -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm echo-margin-top-lg">ボタン2個</p>
<div class="echo-buttons echo-buttons-grow">
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-b echo-button-icon-arrow">ボタン</a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-a">ボタンの文字数が多い</a>
</div><!-- /.echo-buttons-item -->
</div><!-- /.echo-buttons -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm echo-margin-top-lg">ボタン3個</p>
<div class="echo-buttons echo-buttons-grow">
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-b echo-button-icon-arrow">ボタン</a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-b">ボタン</a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-xl echo-button-style-a">ボタンの文字数が多い</a>
</div><!-- /.echo-buttons-item -->
</div><!-- /.echo-buttons -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm echo-margin-top-lg">ボタン4個</p>
<div class="echo-buttons echo-buttons-grow">
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-lg echo-button-style-b"><i class="fas fa-star echo-text-xl"></i><span class="echo-sr">お気に入り</span></a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-lg echo-button-style-b"><i class="fas fa-heart echo-text-xl"></i><span class="echo-sr">いいね!</span></a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-lg echo-button-style-b"><i class="fas fa-share-alt echo-text-xl"></i><span class="echo-sr">シェアする</span></a>
</div><!-- /.echo-buttons-item -->
<div class="echo-buttons-item">
<a href="#" class="echo-button echo-button-lg echo-button-style-a"><i class="fas fa-download echo-text-xl"></i><span class="echo-margin-left-sm">ダウンロード</span></a>
</div><!-- /.echo-buttons-item -->
</div><!-- /.echo-buttons -->