ボタンを大きくするが、テキストを同じサイズにする

Question

htmlのボタンは完全に機能する。しかし、CSSを使って正しくスタイルを設定することはできません。

私はボタンに幅やパディング/マージンを追加 が、それはボタンのスタイルを遺跡：

目標は、このように見えるようにボタンを取得することです。それはまた敏感でなければなりません。何らかの理由で色/境界線の半径を変更することもできません。 アンカータグでこれをやってみましたが、いいボタンを作ってみましたが、これはこのボタンよりも少なくて済みました。

また、CSSとして別々にブートストラップを実行します。

スニペット：

#background-log { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color: #ffffff; 
 
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
} 
 
.button-login { 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin: 10px; 
 
    background-color: #6441a4; 
 
} 
 

 
.twitch { 
 
    text-transform: uppercase; 
 
    width: 100px; 
 
}

<div id="background-log"> 
 
    <div class="button-login"> 
 
    <button class="twitch">Sign in with Twitch</button> 
 
    </div> 
 
</div>

Answer 1

まずそれあなたが適切に幅とパディング/マージンを適用することができますブロックレベル要素にするボタンのdisplay:block;を設定します。ボタンの上にwidthを使用して幅を広げるには、paddingを使用してテキストとボタンの境界線の間隔を広げ、borderとbackgroundなどのデフォルトのボタン値を希望の値で上書きします。

ボタンを反応させるには、幅のパーセント値を使用することもできます。 border-radiusとbox-shadowを追加して、画像内でより似たように見えるようにすることもできます。以下の例を参照してください。

#background-log { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color: #ffffff; 
 
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
} 
 
.button-login { 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin: 10px; 
 
} 
 
.button-login button { 
 
    display: block; 
 
    text-transform: uppercase; 
 
    width: 300px; 
 
    color: #fff; 
 
    border: none; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    border-radius: 2px; 
 
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); 
 
} 
 
.twitch { 
 
    background-color: #6441a4; 
 
} 
 
.hitbox { 
 
    background-color: #98cb01; 
 
}

<div id="background-log"> 
 
    <div class="button-login"> 
 
    <button class="twitch">Sign in with Twitch</button> 
 
    <button class="hitbox">Sign in with Hitbox</button> 
 
    </div> 
 
</div>

Answer 2

私はあなたが、ブートストラップ使用をお勧めしますし、クラスBTN-ブロックが欠落しているうちに完全幅になります

<button class="btn btn-primary btn-block"> 

にボタンを設定しますあなたのパディングをアップする。

チェックアウトhttp://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_block&stacked=h

Answer 3

あなたは紫色のボタンをしたい場合は、ボタンに、ではない周囲のdivにbackground-colorプロパティを追加します。私はあなたの例を明確にするために縮小し、例の画像のように丸みのあるボーダーを追加しました：

.twitch { 
    padding: 10px; 
    background-color: #6441a4; 
    color: white; 
    border-radius: 5px; 
    border-width: 0px; 
} 
<button class="twitch">Sign in with Twitch</button>