Eine Taste größer machen, aber den Text gleich groß halten

Question

Der Button in html funktioniert einwandfrei. Aber ich kann es nicht korrekt mit CSS formatieren.

Das Ziel ist, den Knopf zu erhalten wie folgt aussehen:

Wenn ich eine Breite oder padding/Marge auf die Schaltfläche fügen Sie die Schaltfläche Stil ruiniert. Es sollte auch reagieren. Auch aus irgendeinem Grund kann ich den Farb-/Umrandungsradius nicht ändern. Versucht, es mit einem Anker-Tag zu tun, um einen schönen Knopf zu machen, aber das funktionierte sogar weniger als dieser Knopf.

Ich auch Bootstrap separat als CSS ausführen.

Snippet:

#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

Sie zuerst display:block; für die Schaltfläche es ein Block-Element zu machen, die Sie richtig Breite und Polsterung/Marge anwenden können. Verwenden Sie width auf der Schaltfläche, um es breiter zu machen, verwenden Sie padding, um den Abstand zwischen Text und Schaltflächenrahmen zu erhöhen und die Standardschaltflächenwerte wie border und background mit den gewünschten Werten zu überschreiben.

Um die Schaltflächen ansprechbar zu machen, können Sie auch einen Prozentwert für die Breite verwenden. Sie können auch eine border-radius und box-shadow hinzufügen, damit es in Ihrem Bild mehr aussieht. Siehe das Beispiel unten.

#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

Ich würde Sie Bootstrap verwenden empfehlen und stellen Sie die Taste, um

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

die Klasse BTN-Block wird es in voller Breite mit sich machen fehlt up deine Polsterung.

Check out http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_block&stacked=h

Answer 3

Wenn Sie einen violetten Knopf wollen, eine background-color Eigenschaft auf die Schaltfläche, nicht an die umgebende div hinzuzufügen. Ich reduzierte Ihr Beispiel zu klären und auch einen abgerundeten Rand wie im Beispiel Bild hinzugefügt:

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