兄弟を動かさずに1つの要素のボーダー幅を変更する

私はCSSボタンで何かしようとしていますが、ユーザーがボタンを押すと、兄弟ボタンがちょっと動いてしまいます。兄弟を動かさずに1つの要素のボーダー幅を変更する

ボーダー半径のためにアウトラインを使用できません。

これに対処する方法はありますか？

例：

.main-body { 
 
    background-color: gray; 
 
    width: 50vw; 
 
    height: 50vw; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.button { 
 
    border-radius: 20px; 
 
    border-style: solid; 
 
    border-color: red; 
 
    border-width: 0 2vw 2vw 0; 
 
    font-size: large; 
 
    margin: 4%; 
 
    width: 40%; 
 
    height: 40%; 
 
    transition: width 0.1s, height 0.1s, border 0.1s, margin 0.1s; 
 
} 
 

 
.button:focus { 
 
    outline: 0; 
 
} 
 

 
.button:active { 
 
    border-width: 0; 
 
    width: calc(40% - 2vw); 
 
    height: calc(40% - 2vw); 
 
    margin-top: calc(4% + 2vw); 
 
    margin-left: calc(4% + 2vw); 
 
}

<body> 
 
    <div class="main-body"> 
 
    <button class="button">1</button> 
 
    <button class="button">2</button> 
 
    <button class="button">3</button> 
 
    <button class="button">4</button> 
 
    </div> 
 
</body>

出典

2017-08-30 Dima T.

追加vertical-align: bottom;.buttonに

.main-body { 
 
    background-color: gray; 
 
    width: 50vw; 
 
    height: 50vw; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.button { 
 
    vertical-align: bottom; /* now bottoms will align so no buttons will move */ 
 
    border-radius: 20px; 
 
    border-style: solid; 
 
    border-color: red; 
 
    border-width: 0 2vw 2vw 0; 
 
    font-size: large; 
 
    margin: 4%; 
 
    width: 40%; 
 
    height: 40%; 
 
    transition: width 0.1s, height 0.1s, border 0.1s, margin 0.1s; 
 
} 
 

 
.button:focus { 
 
    outline: 0; 
 
} 
 

 
.button:active { 
 
    border-width: 0; 
 
    width: calc(40% - 2vw); 
 
    height: calc(40% - 2vw); 
 
    margin-top: calc(4% + 2vw); 
 
    margin-left: calc(4% + 2vw); 
 
}

<body> 
 
    <div class="main-body"> 
 
    <button class="button">1</button> 
 
    <button class="button">2</button> 
 
    <button class="button">3</button> 
 
    <button class="button">4</button> 
 
    </div> 
 
</body>

出典

2017-08-30 12:28:27

コード、変更

.button:active { 
    top: calc(4% + 2vw); 
    }

.main-body { 
 
    background-color: gray; 
 
    width: 50vw; 
 
    height: 50vw; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.button { 
 
    border-radius: 20px; 
 
    border-style: solid; 
 
    border-color: red; 
 
    border-width: 0 2vw 2vw 0; 
 
    font-size: large; 
 
    margin: 4%; 
 
    width: 40%; 
 
    height: 40%; 
 
    transition: width 0.1s, height 0.1s, border 0.1s, margin 0.1s; 
 
} 
 

 
.button:focus { 
 
    outline: 0; 
 
} 
 

 
.button:active { 
 
    border-width: 0; 
 
    width: calc(40% - 2vw); 
 
    height: calc(40% - 2vw); 
 
    top: calc(4% + 2vw); 
 
    margin-left: calc(4% + 2vw); 
 
    
 
}

<body> 
 
    <div class="main-body"> 
 
    <button class="button">1</button> 
 
    <button class="button">2</button> 
 
    <button class="button">3</button> 
 
    <button class="button">4</button> 
 
    </div> 
 
</body>

へ

.button:active { 
    margin-top: calc(4% + 2vw); 
    }

次試します

出典

2017-08-30 12:30:01 Santhoshkumar

兄弟を動かさずに1つの要素のボーダー幅を変更する

答えて

関連する問題