Search code examples
htmlcssbuttonalignment

2 identical buttons display differently with exact same CSS and HTML

I created 2 buttons on the same page by creating one, then duplicating it. They are supposed to be centered horizontally on the page. But for some reason, only the first one displays correctly, positioning and colour, but the second one does not.

I am new to HTML and CSS. I made a page that has 2 sections (did not use the section tag), personal portraits and family portraits. Each section is supposed to have a horizontally centered "book now" button under it. Initially, I made it so the first button displays correctly as in the first picture here: Ideal button location There is a sufficient gap above it and it is perfectly centered horizontally. To achieve the horizontal centering, I used "margin: auto" for the in-document CSS. I cannot recall what the exact code was for that.

Then I noticed the second button does not display exactly the same as the first one, despite the code being exactly the same, and placed outside the description div that contains the photo shoot information (ie all the text and applicable images) and on its own line. The second button is bigger, and the colour would either bleed and fill the entire line (do not have picture for this) or not show the colour at all, so I edited the code and ended up with this effect, which is still not what I want (I made it red so you can see, normally it is very light grey and sometimes the colour in the second button fill the entire line/span):

Button 1

Meanwhile, on the exact same page, the second button does not display the colour red as it should:

enter image description here

Here is the code.

<!-- HTML Code for the button starts below -->
<div class="buttons">
  <a href="contact.html">
    <div class="booknow" id="booknowbutton">
    <p><strong>Book now!</strong></p>
    </div>
  </a>
</div>
<!-- HTML Code for the button ended above -->

<!-- CSS Code for the button appearance starts below -->
<style>
.buttons {
  margin: auto;
  background-color: red;
}

.booknow {
  font-family: century gothic;
  color: #8201C2;
  text-align: center;
  border-radius: 1px;
  border: solid;
  max-width: 100px;
  padding: 10px;
}
</style>

<style>
    #booknowbutton:hover {
  background-color: #8201C2;
  color: white;
}
</style>
<!-- CSS Code for the button appearance ended above -->

I have the HTML code for the button in the HTML file twice, but I only put one in the code for demonstration.

I wrote the in-document CSS once and added the button at the respective locations in the document twice, to reference the same CSS but the second button refuses to display properly.

To make it more complicated, the way it is currently (without the display: inline or block), in mobile mode, the first button appears on the right hand side like this picture below shows (as you can see, the text juts out on the right hand side, which is not something it used to do): Button one in mobile mode

but the second button remains in the center: enter image description here

If you need me to give a link to the page or the complete code, let me know and I will think of something. I just don't want to include a link that may expire or break so other people can't read and learn from this later.

What I cannot seem to achieve: I want the following simultaneously:
- All buttons positioned identically - All buttons displaying correctly (colour and size) - All buttons controlled with one set of CSS - All buttons horizontally centered - All buttons with about 40px margin on the top

I can get a combination of the above at any one time but not all together at the same time. The photos are in a fader and is already centered vertically in its div and the photo and the text are in a 'row' with 2 columns and the button is supposed to be outside and below the row.
Thanks

Solution

  • I see that you are using two different classes , "buttons" and "booknow" . We don't need two different classes for a single component . And you have used an id "booknowbutton" , id's are used when the CSS needs to be applied only for a single component , and since you have used it for hovering , we can reuse the same class component . I have made changes to code accordingly and with your requirements , you can use the class "booknow" , wherever you want to use the same button.

    <!-- HTML Code for the button starts below -->
<div>
  <a href="contact.html">
    <div class="booknow" >
    <p><strong>Book now!</strong></p>
    </div>
  </a>
</div>
<!-- HTML Code for the button ended above -->

<!-- CSS Code for the button appearance starts below -->
<style>
  .booknow
 {
  font-family: century gothic;
  background-color:red;
  color: #8201C2;
  text-align: center;
  border-radius: 1px;
  border: solid;
  max-width: 100px;
  padding: 10px;
  margin: 40px auto
}
.booknow:hover{
  background-color: #8201C2;
  color: white; 
}
</style>
<!-- CSS Code for the button appearance ended above -->