<div class="btn-wrapper">
<button>One</button>
<button>Two</button>
<button>Three</button>
</div>
<div class="content-wrapper">
<div class="block1">
</div>
<div class="block2">
</div>
<div class="block3">
</div>
</div>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background-color:#ddd;
}
.btn-wrapper{
width: 100%;
display: flex;
justify-content: center;
}
.btn-wrapper>button{
border: none;
padding: 5px 15px;
background-color:#ccc;
margin: 2px 10px;
border: 1px solid #bfbfbf;
color: #626262;
cursor: pointer;
}
.btn-wrapper>button:hover{
background-color: #c0c0c0;
color: #414040;
letter-spacing: 2px;
transition: 400ms;
}
</style>
I have used display flex to arrange button in a div, when you hover on any button it expand but also effect other’s position too. How to get rid of it??