BPrepper BPrepper - 3 months ago 8
CSS Question

Making a button larger, but keeping the text the same size

The button in html works perfectly. But I cannot get it styled correctly using CSS.

The goal is to get the button to look like this: https://i.gyazo.com/5d03043d61aa3be56d4028d85a90b156.png

When I add a width or padding/margin to the button it ruins the button style. It should also be responsive. Also for some reason I cannot change the color/border radius.
Tried doing it with an anchor tag as well to make a nice button, but that worked even less than this button.

I also run bootstrap seperately as CSS.

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

First set display:block; for the button to make it a block-level element that you can properly apply width and padding/margin on. Use width on the button to make it wider, use padding to increase the space between text and button border and overwrite the default button values like border and background with the values you wish.

To make the buttons responsive, you can also use a percentage value for the width. You can also add a border-radius and box-shadow to make it look more like in your image. See the example below.

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

Comments