title: CSS animation to split button into 2 options on click
body: <p>In an HTML form, I have a simple button - very similar to the ones showcased here <a href="https://codepen.io/sebj54/pen/oxluI" rel="nofollow">https://codepen.io/sebj54/pen/oxluI</a></p>
  
  <pre><code>.btn {
    position: relative;
  
    display: block;
    margin: 30px auto;
    padding: 0;
  
    overflow: hidden;
  
    border-width: 0;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  
    background-color: #2ecc71;
    color: #ecf0f1;
  
    transition: background-color .3s;
  }
  </code></pre>
  
  <p>I want to use a CSS (or Javascript) based animation that, when the button is clicked, generates 2 other buttons in the same div that display the 2 options that offer logical follow-up to this one. How can I accomplish this? Any suggestions for fancy transitions to the same would also help.</p>