layout-buttons

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個の場合はボタンの幅が狭くなるため、ラベルをアイコンにする等の考慮が必要となる。

<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 -->