Overlapping buttons

[travis]

I return to the trusty old Kirupa forms to ask all of you front end masters a question:
I have some login related buttons stacked separated by breaks but the bottom one keeps overlapping the one above it:

The login button looks fine but the “Forgot your password?” button overlaps the Sign-Up button. And also doesn’t seem to respect the padding in the card.

The forgot password-button looks like this: <%= link_to "Forgot your password?", new_password_path(resource_name), class: "button button-warn button-radius stacked-pad"%> <br /> (it’s a Rails application but the classes are what’s important).

This is all the styling on the button:

a.button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.button-warn {
  font-weight: 700;
  color: $surf-blue-dark;
  background-color: $coralfish-red;
  transition: 0.3s;
}
.button-radius {
  border-radius: 99999px;
}

.stacked-pad {
  margin-top: 5px;
  margin-bottom: 5px;
  position: absolute;
}

.stacked-pad is just a class I threw in to try and get some spacing between the buttons, and it works for Log in and sign up but not forgot password.
The card itself sits inside a centred flexbox but doesn’t itself have any specific display attributes. Log in is nested in a form tag but sign up and forgot password are direct children of the card class that they are sitting in (which again they don’t seem to respect the padding on).

[senocular]

I only just glanced, but this caught my eye:

  ...
  padding-bottom: 0.25rem;
}
  font-weight: 700;
  color: $surf-blue-dark;
  ...

It looks like you’re missing a selector above font-weight.

[travis]

Hey sorry, I pasted a few different styles in, and must have truncated the start of this selector.

[kirupa]

Can you post this in a live HTML page or codepen example? Fiddling with in the Chrome Dev Tools would help greatly here. Are the buttons set to display: block?

[travis]

Good call! Sorry about that this is most of my style sheet (the relevant parts) copied over: codepen.
Display is not currently set on the buttons but I have tried block and it didn’t make a difference.
Thanks!

[kirupa]

This is a fun problem! The first thing I did was remove all the class values on the buttons. Things look as expected now:

I then fiddled with display: block and removing position: absolute, and that seemed to work. I also removed the <br/> elements since you can use margin-top to space things out now.

My version of your pen can be seen here: https://codepen.io/kirupa/pen/MWwOoVW

Does this work for you as well?

[travis]

That seems to have done it! Thank you so much! Codepen is awesome, I’m glad you prompted me to put my stuff there rather than posting static HTML & CSS like it’s Kirupa forum 2006.

[kirupa]

You can even embed a codepen on the forums