title: Animation when hovering over a button
body: <p>I am trying to make some animated effect by adding a rectangle that expands over the button when the button (not the rectangle since it's set to <code>width: 0px;</code>) is hovered over by the user. Though, I don't really know how to do that, so I'm blocked.</p>
  <p>So:</p>
  <ul>
  <li>There's a button.</li>
  <li>There's a rectangle somewhere.</li>
  <li>The rectangle is 0px width.</li>
  <li>I want the <strong>rectangle</strong> to grow from 0 to 200px width when the button is hovered. <strong>NOT</strong> the button.</li>
  </ul>
  <p>I accept javascript solutions but only like real basic ones cause I'm a beginner, I won't understand javascript if it's not explained to me.</p>
  <p>For the moment, here's my code:</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;flex-container&quot;&gt;
     
      &lt;div class=&quot;sidebar&quot;&gt;
  
          &lt;button style=&quot;margin-top: 100px;&quot; onclick=&quot;Accueil()&quot;&gt;&lt;div style=&quot;z-index: 2;&quot;&gt;Accueil&lt;/div&gt;&lt;/button&gt;
              &lt;div class=&quot;rectangle&quot; name=&quot;acc&quot; style=&quot;top: 100px;&quot;&gt;&lt;/div&gt;
  
          &lt;button onclick=&quot;Thés()&quot;&gt;&lt;div style=&quot;z-index: 2;&quot;&gt;Thés&lt;/div&gt;&lt;/button&gt; 
              &lt;div class=&quot;rectangle&quot; name=&quot;the&quot; style=&quot;top: 100px;&quot;&gt;&lt;/div&gt;
          
          &lt;button onclick=&quot;Tisanes()&quot;&gt;&lt;div style=&quot;z-index: 2;&quot;&gt;Tisanes&lt;/div&gt;&lt;/button&gt;
              &lt;div class=&quot;rectangle&quot; name=&quot;tis&quot; style=&quot;top: 100px;&quot;&gt;&lt;/div&gt; 
  
          &lt;button onclick=&quot;Théières()&quot;&gt;&lt;div style=&quot;z-index: 2;&quot;&gt;Théières&lt;/div&gt;&lt;/button&gt;
              &lt;div class=&quot;rectangle&quot; name=&quot;thei&quot; style=&quot;top: 100px;&quot;&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>    .sidebar &gt; button {
     margin: 20px; /* marge de 30px entre les boutons */
     width: 200px;
     height: 60px;
     max-height: 60px !important;
     max-width: 200px !important; 
     background-color: #F5FAD2;
     text-align: center;
     font-size: 24px;
     border-radius: 7%;
     border: none;
     transition-duration: 0.4s;
     cursor: pointer;
     color: #404040;
     position: relative;
     
  }
  
  .rectangle {
     width: 0px;
     height: 60px;
     color: rgba(255, 255, 255, 0.144);
     border-radius: 7%;
     border: none;
     transition: width 1.1s ease 0s;
     transition-timing-function: ease;
     transition-delay: 0s;
     position: absolute;
     z-index: 1;
  }
  
  .rectangle button:hover {
     width: 200px;
  }
  </code></pre>
  <p>Thanks.</p>