Moving buttons around their parent using CSS

HTML-CSS
1

This is my code so far:
HTML:

<div class="buttons">
  <button type="button" id="buttonSpanish">CHANGE TO SPANISH</button>
  <button type="button" id="buttonFrench">CHANGE TO FRENCH</button>
  <button type="button" id="buttonGerman">CHANGE TO GERMAN</button>
</div>

and CSS:

button {
  background-color: #03a9f4;
  color: white;
  border-color: white;
  border-radius: 2px;
  border: none;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  display: inline-block;
  max-width: 200px;
  text-transform: uppercase;
  height: 50%;
}

.buttons {
  background-color: black;
  display: flex;
  justify-content: space-around;
  height: 50px;
  border: 5px solid #03a9f4;
  width: 98.9%;
}

The finished product looks like this:

Screen Shot 2024-11-29 at 3.45.52 PM
Screen Shot 2024-11-29 at 3.45.52 PM1536Ă—120 7 KB

How do I make it so that the buttons are “floating” In the middle? I want to keep the same distance horizontally, but change the vertical spacing so that the buttons are not attached to the parent div if that makes any sense

2

Hi @accumbensmusic1

You could remove the height property from the .buttons selector, and replace it with padding: 2em;

Happy coding

3

Thanks! However now the div is to big for the screen! I tried different em values but it still is doing it. I have to slide the window to see the whole box.

4

Then restore the height property and set a value for the padding-top property.

2 Likes
5

Also consider adding a simple flex box line to the code:

align-items: center;

That should be applied to the container containing the buttons.

1 Like
6

This makes the container really small, and the buttons are now touching both the top and bottom of their container?

7

In that case, restore the original code, then in the button (element) selector, set margin top and bottom to auto.

2 Likes