다른 요소에 영향을 미치지 않고 어떻게 버튼을 더 높이 야합니까?

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