css よくるるコンポーネントの设计·実装パターン - ボタン编：http：//qiita.com/usako/items/8b34838b1a15e062a122

Posted 2021-05-13

.form {
 …
}
.form__footer {
    margin-left: auto;
    margin-right: auto;
    width: 200px; /* フォームにおけるボタンの幅 */
}

.comment {
    position: relative;
}
.comment__footer {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 120px;
    font-size: 14px;
}

<div class="form">
    <div class="form__body">…</div>
    <div class="form__footer">
        <button class="btn button--full">ログイン</button>
    </div>
</div>

<div class="comment">
    <div class="comment__body">…</div>
    <div class="comment__footer">
        <button class="btn button--full">返信する</button>
    </div>
</div>

.form {
 …
}
.form--footer {
    margin-left: auto;
    margin-right: auto;
    width: 200px; /* フォームにおけるボタンの幅 */
}

.comment {
    position: relative;
}
.form--footer {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 120px;
    font-size: 14px;
}

<div class="form">
    <div class="form__body">…</div>
    <div class="form__button">
        <button class="btn button--full">ログイン</button>
    </div>
</div>

<div class="comment">
    <div class="comment__body">…</div>
    <div class="comment__button">
        <button class="btn button--full">返信する</button>
    </div>
</div>

.btn {
 …
}
.btn--short {
    width: 200px;
}
.btn--long {
    width: 480px;
}
.btn--full {
    width: 100%;
}

/* ボタンコンポーネントに対してスタイルの初期化を行う */
.button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    border: 1px solid #000;
    margin: 0;
    padding: 0.3em 1em;
    background-color: #eee;
    text-decoration: none; /* 追加 */
    font-size: inherit;
    color: inherit; /* 追加 */
    cursor: pointer;
}

/* button 要素そのものには何もしない */
button {}

/* ボタンコンポーネントに対してスタイルの初期化を行う */
.button {
    -webkit-appearance: none; /* 追加 */
       -moz-appearance: none; /* 追加 */
            appearance: none; /* 追加 */
    display: inline-block;
    border: 1px solid #000;
    margin: 0; /* 追加 */
    padding: 0.3em 1em;
    background-color: #eee;
    font-size: inherit; /* 追加 */
    cursor: pointer;
}

/* 好ましくない例 */
a.button,
button.button {
    display: inline-block;
    border: 1px solid #000;
    padding: 0.3em 1em;
    background-color: #eee;
    cursor: pointer;
}