title: CSS3: Change shape of button on hover
body: <p>I created a button: </p>
  
  <p><a href="http://jsfiddle.net/fy2zG/#&amp;togetherjs=xaJ1VA8PBN" rel="nofollow noreferrer">http://jsfiddle.net/fy2zG/#&amp;togetherjs=xaJ1VA8PBN</a></p>
  
  <p>My css so far is:</p>
  
  <pre><code>.button {
      padding: 5px 20px;
      background: orange;
      position: relative;
      float:left;
      text-align: center;
      border-radius: 10px;
      text-decoration: none;
      color: white;
  }
  </code></pre>
  
  <p>My goal is to have (only) the right side of the button turning to an arrow peak on hover. The result should be something similar like this:</p>
  
  <p><img src="https://i.stack.imgur.com/0E0wr.jpg" alt="Arrow"></p>
  
  <p>When hovering out, the button shall transit to its original shape.</p>
  
  <p>Is this something that can be achieved with CSS or is jQuery needed?</p>