0

I am trying to make a simple row of buttons that, when hovered, drops down stylistically.

Here is my HTML:

.yellow {
  background-color: #fff444;
}

.blue {
  background-color: #7d7dff;
}

.bordered {
  border-radius: 5px;
  border: 2px solid #000;
}

.bordered-bottom {
  border-bottom: 2px solid #000;
}

.round-button {
  color: #000;
  cursor: pointer;
  display: inline-block;
  box-shadow: 3px 3px #000;
  transition: box-shadow 0.2s, transform 0.2s;
  margin: 0 3px 3px 0;
}

.round-button:hover {
  background-color: #fff;
  transition: box-shadow 0.2s, transform 0.2s;
}

.round-button:active {
  transform: translate(2px, 2px);
  background-color: #fff;
  box-shadow: 1px 1px #000;
  transition: box-shadow 0.2s, transform 0.2s;
}

.pad {
  padding: 10px;
}

body {
  margin: 0px;
}

h1 {
  color: black;
  font-weight: bold;
  margin: 0px;
}

.button-row {
  height: 100%;
}

.button-row button {
  border: 2px solid #000;
  border-left: none;
  border-top: none;
  height: 100%;
  margin-bottom: -2px;
  margin-right: 0px;
  margin-left: 0px;
  transition: padding-top 0.2s, transform 0.2s, margin-top 0.2s;
}

.button-row button+button {
  border-left: 2px solid #000;
  margin-left: -2px;
}

.button-row button:hover {
  background-color: #fff;
  display: inline-block;
  padding-top: 10px;
  margin-top: -10px;
  transform: translate(0px, 10px);
  transition: padding-top 0.2s, transform 0.2s, margin-top 0.2s;
}
<div id="head" class="yellow">
  <h1 class="pad">header</h1>
  <div class="button-row bordered-bottom">
    <button id="button" class="yellow">Home</button>
    <button id="button2" class="yellow">About</button>
  </div>
</div>

I expect the result to be as in fig 1:

image of a simple webpage with a yellow header saying 'header', and two buttons below it, one of which is highlighted and has dropped down fig 1

But it appears as in fig 2: image of a simple webpage with a yellow header saying 'header', and two buttons below it with a space between the buttons fig 2

fig 1 is the result I get when making the buttons defined inline in the html like so:

<button id="button" class="yellow">Home</button><button id="button2" class="yellow">About</button>

fig 2 has the same result as putting a space between these two inline buttons:

<button id="button" class="yellow">Home</button> <button id="button2" class="yellow">About</button>

I believed that both ways of writing it (not the one with the space) would appear the same. But it isn't appearing the same. Is there some reason for this? I checked my whitespace--I can remove the tabs, but not the newline.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
LydiasPost
  • 60
  • 6
  • 1
    From the HTML you've posted (with the ` – David Thomas Jan 12 '23 at 15:13
  • its working here when i click on run code Snippet, i am able to see fig 1 as expected. – Indra Yadav Jan 12 '23 at 15:16
  • it works for me as well, on Windows 11, Chrome Version 109.0.5414.74 – KSankar Jan 12 '23 at 15:17
  • Perhaps try changing your formatting defaults. I was getting the fig2 results and I deleted an extra space that was existing between the buttons. I could keep them on separate lines they just cannot contain a space between them. – Jake L Jan 12 '23 at 15:38
  • Using Edge I do not see fig 1, I see fig 2. The way to have this fixed if the button HTML has to stay on separate lines is to use a flexbox for class button-row. – Gerard Jan 12 '23 at 15:47

0 Answers0