Wie sollte ich einen Button höher machen, ohne andere Elemente zu beeinflussen?

Question

Ich habe eine Navigationsleiste oben auf meiner Website.

HTML:

<text align="center"> 
 
<div class="home-nav"> 
 
<a href="#whats-new"><button class="nav-btn">What's New</button></a> 
 
<a href=""><button class="nav-btn">Community</button></a> 
 
<button class="play-btn">Coming Soon</button> 
 
<button class="nav-btn">Profile</button> 
 
<a href=""><button class="nav-btn">Information</button></a> 
 
</text>

CSS:

.home-nav { 
 
    width:1240px; 
 
\t height:49px; 
 
\t background-color:#F1B84E; 
 
\t border:5px solid #FFDE84; 
 
\t border-style:outset; 
 
} \t 
 

 
.nav-btn { 
 
\t width:auto; 
 
\t height:49px; 
 
\t background-color:#F1B84E; 
 
\t border:none; 
 
\t font-family:showcard gothic; 
 
\t color:white; 
 
\t -webkit-text-stroke:1.25px #000000; 
 
    -webkit-text-fill-color:#FFFFFF; 
 
\t font-size:20px; 
 
} 
 

 
.play-btn { 
 
    width:auto; 
 
    height:69px; 
 
\t background-color:#79E119; 
 
\t -moz-border-radius:10px; 
 
\t -webkit-border-radius:10px; 
 
\t border:5px solid #FFFFFF; 
 
\t font-size:20px; 
 
\t font-family:showcard gothic; 
 
\t color:white; 
 
}

möchte ich die Play-Taste als die normalen Tasten größer sein. Aber wenn ich die Höhe höher als die normalen Knöpfe mache und es betrachte, ändert sich die Position der normalen Knöpfe. Wie kann ich das beheben?

Answer 1

Ok, ich habe ein paar kleine Änderungen an Ihrem CSS-Styling vorgenommen, versuchen Sie es einfach und lassen Sie mich wissen, dass es funktioniert, wie Sie wollten oder nicht.

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; 
    }