他の要素に影響を与えずにボタンを高くするにはどうすればよいですか？

Question

私は自分のウェブサイトの上部にナビゲーションバーを持っています。

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

私は再生ボタンを通常のボタンよりも大きくなりたいです。しかし、高さを通常のボタンより高くして見ると、通常のボタンの位置が変わります。これをどうすれば解決できますか？

Answer 1

私はあなたのCSSスタイリングに若干の変更を加えました。これらを試してみて、あなたが望む通りに動作するかどうかを教えてください。

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