title: How do I shrink one element while enlarging another in css3
body: <p>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.</p>
  <p>This is the HTML5 code relating to the two button elements. For examples sake we will call the &quot;Im hungry&quot; button, Button A. And &quot;Show me more&quot; button B.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="btn btn-full" href="#"&gt;I’m hungry&lt;/a&gt;
  &lt;a class="btn btn-ghost" href="#"&gt;Show me more&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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%.</p>