title: How to transition from bottom to top using only hover and without using before or after pseudo element?
body: <p>I have this example snippet code for the anchor tag link. How do you hover a background color from bottom to top using transition?</p>
  
  <p>I have found this reference link but this is not what I want to do in my css, it is using pseudo element <code>before</code> and <code>after</code>.</p>
  
  <p><a href="https://stackoverflow.com/questions/20659605/change-background-from-bottom-to-top-on-hover">before and after pseudo element transition</a></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>.container {width:1000px; max-width:100%; margin:0 auto; padding:0; text-align:center;}
  a {margin:0 auto;text-decoration:none;width:150px; height:30px; background: red; display:block; border: 1px solid black; color:#fff;border-radius:20px; text-align:center;transform-origin: left top;
    transition: all 1s ease;}
  a:hover {background: green; color:black; border:1px solid green;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;a href="#"&gt;Lorem Ipsum Dolor&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it using css properties <code>transition</code> and <code>transform</code> to do this? Please help, I'm quite new to CSS3.</p>