Overlapping buttons

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:
Screen Shot 2020-03-05 at 7.23.15 AM

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).

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.

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

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?

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.

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?


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.

1 Like

You can even embed a codepen on the forums :stuck_out_tongue: