title: How can I make a bordered circle button expand into a bordered pill button on hover in Unity, and still maintain the border thickness?
body: <p>I'm using Unity 2019.2.5f1, and I'm trying to create some dynamic UI buttons that would operate as such...</p>
  
  <p>Clean bordered button when not hovered, see below:</p>
  
  <p><img src="https://i.stack.imgur.com/fTrbv.png" alt="1"></p>
  
  <p>then, it automagically animates and elongates into a clean and constant bordered pill button when hovered and pressed, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/fbHkC.png" alt="2"></p>
  
  <p><strong>The Issue:</strong> I'm trying to use one sprite (the circular one) to accomplish all of this, however when the circular button expands to the pill button, the border becomes distorted. Like this:
  <img src="https://i.stack.imgur.com/xAMG1.png" alt="3"></p>
  
  <p>Editor Settings:</p>
  
  <p><img src="https://i.stack.imgur.com/4OeLY.png" alt="4"></p>
  
  <p>Current 9-Slicing:</p>
  
  <p><img src="https://i.stack.imgur.com/XjXjG.png" alt="5"></p>
  
  <p>I've tried several 9-slices on the sprite, one with just a left to right slice down the centerline of the circle. One with a small sliver between the left and right slices. One with the circle sprite split into four quadrants, with all slices down the. These all seem to cause similar behavior. I feel like this is a simple thing to fix...alas, my efforts have been thwarted.</p>