CSS Position 2 buttons inline-block in center of screen, while keeping hover behavior

Question

I have been playing around with css for a bit trying many different methods with no success. I came really close with the code below, except the hover doesn't work anymore. Guessing it has overlapping elements? So, I would like 2 buttons next to each other but also center of screen regardless of screen size - and they also need to be hoverable. Here is the closest I could get...

.standardButton{
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    border-radius: 5px;
    background: #4CAF50;
    margin-top: -5px;
    width: 90%;
    height: 50px;
    border: 0;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}
.standardButton:hover,.standardButton:active,.standardButton:focus {
    background: #43A047;
}
.buttonBackground2{
    height: 15px;
    width: 110px;
    border-radius: 5px;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding-bottom: 35px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.positionLogoutButton{
    display: inline-block;
    margin: 10px;
}
.positionAddDeviceButton{
    display: inline-block;
    margin: 10px;
}
.centerEverything{
    display: flex;
    justify-content: center;
}

<div class="centerEverything">
  <div class="positionLogoutButton">
    <div class="buttonBackground2">
      <button class="standardButton" onClick={handleLogout}>Logout</button>
    </div>
  </div>
  <div class="positionAddDeviceButton">
    <div class="buttonBackground2">
      <button class="standardButton" onClick={handleAddDevice}>Add Device</button>
    </div>
  </div>
</div>

yes, and it does if I am on the far right side of the button but anywhere else and it doesn't — Justin Oberle, Jan 19 '21 at 17:45
is there anywhere that we can test it i changed the hover color to black here its working — godfather, Jan 19 '21 at 17:50
You're right. when I make them class in pure html javascript it works. But in react it is not working. — Justin Oberle, Jan 19 '21 at 17:55
The above code snippet works exactly as I need but for some reason it isn't working via React.js — Justin Oberle, Jan 19 '21 at 17:56
do you have it on sandbox? have you tried to use important to check if something overriding the css? — godfather, Jan 19 '21 at 17:56
I'm not sure what sandbox is. I did find the issue though. I have a div above this and when I remove it, it works fine. Why would a closed div mess with this? — Justin Oberle, Jan 19 '21 at 17:59
I think there is an element getting rendered above this that is messing it up. I'll find it in a minute most likely. — Justin Oberle, Jan 19 '21 at 18:02
I have a div that has a lot going on above this. I found that when I add position: relative, and a height it causes this issue. I tried to duplicate in above but it still worked. Either way, I will be able to figure it out from here I think. Thanks for your help. This was very helpful — Justin Oberle, Jan 19 '21 at 18:12

score 2 · Accepted Answer · answered Jan 19 '21 at 18:22

Using flexbox basic properties on container element this is achieved easily: (Have removed un-necessary CSS like margin: 0 auto 100px; This is not needed )

.standardButton{
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    border-radius: 5px;
    background: #4CAF50;
    margin-top: -5px;
    width: 90%;
    height: 50px;
    border: 0;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}
.standardButton:hover,.standardButton:active,.standardButton:focus {
    background: #43A047;
  }
.buttonBackground2{
    height: 15px;
    width: 110px;
    border-radius: 5px;
    background: #FFFFFF;
    max-width: 360px;
/*     margin: 0 auto 100px; This is not needed */
    padding-bottom: 35px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }
.positionLogoutButton{
    display: inline-block;
    margin: 10px;
}
.positionAddDeviceButton{
    display: inline-block;
    margin: 10px;
}
.centerEverything{
    display: flex;
    justify-content: center;
    height:100vh;
    align-items:center;
}

    <div class="centerEverything">
       <div class="positionLogoutButton">
         <div class="buttonBackground2">
           <button class="standardButton" onClick={handleLogout}>Logout</button>
         </div>
       </div>
       
       <div class="positionAddDeviceButton">
            <div class="buttonBackground2">
                 <button class="standardButton" onClick={handleAddDevice}>Add Device</button>
            </div>
       </div>
  </div>

This is a good solution, although my problem turned out to be the component above it. however, I am marking this as a solution because it might help someone in the future. Thanks! — Justin Oberle, Jan 19 '21 at 18:27

score 0 · Answer 2 · answered Jan 19 '21 at 18:08

You can position it vertically and horizontally using the the following code snippet on .centerEverything.

.centerEverything{
  position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
}

I have added a parent container with a class .someContainer to show you an example with a black background.

Also I removed margin: 0 auto 100px; from the buttons as this is adding unnecessary height to the button.

.standardButton{
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    border-radius: 5px;
    background: #4CAF50;
    margin-top: -5px;
    width: 90%;
    height: 50px;
    border: 0;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}
.standardButton:hover,.standardButton:active,.standardButton:focus {
    background: #43A047;
  }
.buttonBackground2{
    height: 15px;
    width: 110px;
    border-radius: 5px;
    background: #FFFFFF;
    max-width: 360px;
    padding-bottom: 35px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }
.positionLogoutButton{
    display: inline-block;
    margin: 10px;
}
.positionAddDeviceButton{
    display: inline-block;
    margin: 10px;
}
.centerEverything{
  position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
}
.someContainer {
  position: relative;
  background-color: black;
  height: 300px;
}

<div class="someContainer">
  <div class="centerEverything">
    <div class="positionLogoutButton">
      <div class="buttonBackground2">
        <button class="standardButton" onClick={handleLogout}>Logout</button>
      </div>
    </div>
    <div class="positionAddDeviceButton">
      <div class="buttonBackground2">
        <button class="standardButton" onClick={handleAddDevice}>Add Device</button>
      </div>
    </div>
  </div>
</div>

Unfortunately this does not work if you resize the window. Valient effort though — Justin Oberle, Jan 19 '21 at 18:15
Setting the parent relative element to be responsive, such as using a % height and width, would fix that. — Matthew Dangle, Jan 19 '21 at 18:18

CSS Position 2 buttons inline-block in center of screen, while keeping hover behavior

2 Answers2