# Overlapping buttons **URL:** \ **Category:** web dev\ **Created:** [March 5, 2020, 1:26pm UTC](https://forum.kirupa.com/t/overlapping-buttons/641998 "2020-03-05T13:26:43Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)\ **Post date:** [March 5, 2020, 1:26pm UTC](https://forum.kirupa.com/t/overlapping-buttons/641998/1 "2020-03-05T13:26:43Z")
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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/e/eed497012508c4d8f586c921422157cf32a9a5e3.png) 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"%>
` (it’s a Rails application but the classes are what’s important). This is all the styling on the button: ```auto 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). ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [March 5, 2020, 2:04pm UTC](https://forum.kirupa.com/t/overlapping-buttons/641998/2 "2020-03-05T14:04:27Z")
I only just glanced, but this caught my eye: ```auto ... padding-bottom: 0.25rem; } font-weight: 700; color: $surf-blue-dark; ... ``` It looks like you’re missing a selector above `font-weight`. ---
**Author:** ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)\ **Post date:** [March 5, 2020, 2:57pm UTC](https://forum.kirupa.com/t/overlapping-buttons/641998/3 "2020-03-05T14:57:40Z")
Hey sorry, I pasted a few different styles in, and must have truncated the start of this selector. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 5, 2020, 8:12pm UTC](https://forum.kirupa.com/t/overlapping-buttons/641998/4 "2020-03-05T20:12:55Z")
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**? ---
**Author:** ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)\ **Post date:** [March 6, 2020, 7:07pm UTC](https://forum.kirupa.com/t/overlapping-buttons/641998/5 "2020-03-06T19:07:47Z")
Good call! Sorry about that this is most of my style sheet (the relevant parts) copied over: [codepen](https://codepen.io/tfantina/pen/KKpyNNZ). Display is not currently set on the buttons but I have tried block and it didn’t make a difference. Thanks! ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 7, 2020, 4:00am UTC](https://forum.kirupa.com/t/overlapping-buttons/641998/6 "2020-03-07T04:00:02Z")
This is a fun problem! The first thing I did was remove all the class values on the buttons. Things look as expected now: ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/63ddcd2f27d082a91f16e7752e3ca09f44d331b5.png) I then fiddled with **display: block** and removing **position: absolute** , and that seemed to work. I also removed the `
` elements since you can use **margin-top** to space things out now. ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/7/742108c30f9daa0fc04400b0ecd00e6598302dc2.png) My version of your pen can be seen here: [https://codepen.io/kirupa/pen/MWwOoVW](https://codepen.io/kirupa/pen/MWwOoVW) Does this work for you as well? 😆 ---
**Author:** ![travis](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/travis/32/13217_2.png) [@travis](https://forum.kirupa.com/u/travis)\ **Post date:** [March 7, 2020, 4:35am UTC](https://forum.kirupa.com/t/overlapping-buttons/641998/7 "2020-03-07T04:35:56Z")
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. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 7, 2020, 4:43am UTC](https://forum.kirupa.com/t/overlapping-buttons/641998/8 "2020-03-07T04:43:40Z")
You can even embed a codepen on the forums 😛