How do I shrink one element while enlarging another in css3 - html

Question

I have two buttons on my website. When someone hovers over button A it should become a bit bigger while Button B becomes the same bit smaller. And vice versa for when someone hovers over button B. My question is, how do I change the size elements of a div class from within another div class.
This is the HTML5 code relating to the two button elements. For examples sake we will call the "Im hungry" button, Button A. And "Show me more" button B.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 100px;
text-align: center;
color: white;
transition: background-color 0.5s;
transition: width 0.5s;
}
.btn-full:link,
.btn-full:visited {
background-color: #2ecc71;
border: 2px solid #2ecc71;
width: 14%;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 2px solid #2ecc71;
width: 20%;
}
.btn:hover,
.btn:active {
background-color: #27ae60;
color: white;
}
.btn-full:hover,
.btn-full:active {
width: 16%;
}
.btn-ghost:hover,
.btn-ghost:active {
width: 22%;
}
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
So as another form of example. When I hover over button A it should grow from 14% to 16%, and Button B should simultaneously shrink from 22% to 20%.

Answer 1

You can achieve this effect with the flex-grow property. reference w3schools
.container {
width: 500px;
display: flex;
}
.btn {
background-color: lightgreen;
border: 2px solid green;
padding: 8px;
flex-grow: 1;
transition: all.5s;
}
.btn:hover {
flex-grow: 2;
}
<div class="container">
<a class="btn" href="#">I’m hungry</a>
<a class="btn" href="#">Show me more</a>
</div>

Answer 2

The following solution uses the fact that parent element receives :hover as well:
.buttons a {
float:left;
width: 5em;
height: 3em;
margin: 0 1em;
border-radius: 3em;
text-align: center;
line-height: 3;
color: #fff;
background: navy;
transition: .5s
}
.buttons:hover a {
width: 3em;
background: grey
}
.buttons:hover a:hover {
width: 7em;
background: forestgreen
}
<div class="buttons">
A
B
</div>