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>