How should I make a button higher without effecting other elements? - html

Question

I have a navigation bar at the top of my website.
HTML:
<text align="center">
<div class="home-nav">
<button class="nav-btn">What's New</button>
<button class="nav-btn">Community</button>
<button class="play-btn">Coming Soon</button>
<button class="nav-btn">Profile</button>
<button class="nav-btn">Information</button>
</text>
CSS:
.home-nav {
width:1240px;
height:49px;
background-color:#F1B84E;
border:5px solid #FFDE84;
border-style:outset;
}
.nav-btn {
width:auto;
height:49px;
background-color:#F1B84E;
border:none;
font-family:showcard gothic;
color:white;
-webkit-text-stroke:1.25px #000000;
-webkit-text-fill-color:#FFFFFF;
font-size:20px;
}
.play-btn {
width:auto;
height:69px;
background-color:#79E119;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:5px solid #FFFFFF;
font-size:20px;
font-family:showcard gothic;
color:white;
}
I want the play button to be bigger than the normal buttons. But when I make the height higher than the normal buttons and look at it, it makes the normal buttons change position. How can I fix this?

Answer 1

Ok I have bring some small changes to your CSS styling just try these and let me know its working as you wanted or not.
body{
margin:0; padding:0;
}
.home-nav {
width:90%;
margin: 0 auto;
display: block;
background-color:#F1B84E;
border:5px solid #FFDE84;
border-style:outset;
}
.nav-btn {
width:auto;
height:49px;
background-color:#F1B84E;
border:none;
font-family:showcard gothic;
color:white;
-webkit-text-stroke:1.25px #000000;
-webkit-text-fill-color:#FFFFFF;
font-size:20px;
}
.play-btn {
width:auto;
height:70px;
background-color:#79E119;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:5px solid #FFFFFF;
font-size:20px;
font-family:showcard gothic;
color:white;
}