5 pxボーダーがボタンに追加され、ボタンのサイズが増加します。ボックスサイズが機能しない

Question

オンボタン5px border-bottomのアクティブなクラスを追加しています。ボタンサイズが5ピクセル増加します。私はボタンのサイズを増やしたくない。そうする簡単な方法はありますか？ボックスサイズは機能しません。

*, 
 
*:after, 
 
*::before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    border: 2px solid blue; 
 
} 
 

 
.button { 
 
    background: black; 
 
    width: 150px; 
 
    border: 0; 
 
    padding: 20px; 
 
    margin: 0; 
 
    color: white; 
 
} 
 

 
.active { 
 
    border-bottom: 5px solid yellow; 
 
}

<div class="container"> 
 
    <button class="button active">button active</button> 
 
    <button class="button">button</button> 
 
</div>

Answer 1

解決策1：box-shadow

*, 
 
*:after, 
 
*::before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    border: 2px solid blue; 
 
} 
 

 
.button { 
 
    background: black; 
 
    width: 150px; 
 
    border: 0; 
 
    padding: 20px; 
 
    margin: 0; 
 
    color: white; 
 
} 
 

 
.active { 
 
    box-shadow: 0 -5px 0 yellow inset 
 
}

<div class="container"> 
 
    <button class="button active">button active</button> 
 
    <button class="button">button</button> 
 
</div>

解決策2：擬似要素::after

*, 
 
*:after, 
 
*::before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    border: 2px solid blue; 
 
} 
 

 
.button { 
 
    /* Add Position Relative for Button */ 
 
    position: relative; 
 
    background: black; 
 
    width: 150px; 
 
    border: 0; 
 
    padding: 20px; 
 
    margin: 0; 
 
    color: white; 
 
} 
 

 
.active::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 5px; 
 
    width: 100%; 
 
    background: yellow 
 
}

<div class="container"> 
 
    <button class="button active">button active</button> 
 
    <button class="button">button</button> 
 
</div>

Answer 2

.activeクラスとbox-sizing: border-boxの内側にあなたのボタンheightを宣言します。あなたは......行ってもいいです:)

*, 
 
*:after, 
 
*::before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    border: 2px solid blue; 
 
} 
 

 
.button { 
 
    background: black; 
 
    width: 150px; 
 
    border: 0; 
 
    padding: 20px; 
 
    margin: 0; 
 
    color: white; 
 
} 
 

 
.active { 
 
border-bottom: 5px solid yellow; 
 
box-sizing: border-box; 
 
height: 55px; 
 
}

<div class="container"> 
 
    <button class="button active">button active</button> 
 
    <button class="button">button</button> 
 
</div>

Answer 3

は

デフォルトボタンのスタイルに黒5pxのボーダーを追加しようと、アクティブなボタンの黄色の色

.button { 
    background: black; 
    border-bottom: 5px solid black; 
    width: 150px; 
    border: 0; 
    padding: 20px; 
    margin: 0; 
    color: white; 
} 

.active { 
    border-bottom: 5px solid yellow; 
} 

Answer 4

私の理解によれば、ボタンの影が必要です。 ボタンの影を使うほうが良いです。

は、あなたが望むようにそれを設定する次に、この

box-shadow: 10px 10px 5px #aaaaaa; 

を使用してください。あなたは ボタン要素に固定の高さを与えている場合borderbox-sizing: border-boxに関して

Answer 5

は動作します。固定高さ

解決法1

*, 
 
*:after, 
 
*::before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    border: 2px solid blue; 
 
} 
 

 
.button { 
 
    background: black; 
 
    width: 150px; 
 
    border: 0; 
 
    padding: 20px; 
 
    margin: 0; 
 
    color: white; 
 
    height: 53px; 
 
} 
 

 
.button.active { 
 
    border-bottom: 5px solid yellow; 
 
}

<div class="container"> 
 
    <button class="button active">button active</button> 
 
    <button class="button">button</button> 
 
</div>

対処方法2固定高させずに（使用：CSS擬似セレクタ前）

*, 
 
*:after, 
 
*::before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    border: 2px solid blue; 
 
} 
 

 
.button { 
 
    background: black; 
 
    width: 150px; 
 
    border: 0; 
 
    padding: 20px; 
 
    margin: 0; 
 
    color: white; 
 
    position: relative; 
 
} 
 

 
.button.active:before { 
 
    content: ""; 
 
    border-bottom: 5px solid yellow; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div class="container"> 
 
    <button class="button active">button active</button> 
 
    <button class="button">button</button> 
 
</div>