2
我想用css按钮做一些事情,但是当用户按下按钮时,兄弟按钮只会移动一点。更改一个元素上的边框宽度而不移动兄弟
由于边界半径,我无法使用轮廓。
任何想法如何解决这个问题?
一个例子:
.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>