title: Xamarin Forms Login Button Animation
body: <p>I've created a login page with XAML in Xamarin Forms similar to the one in the gif. Now I want to animate the button like in the example. I never animated anything in Xamarin Forms so I have no clue how to get a transition like that. Can anyone explain me how I can get the button to shrink to a circle and become a loading animation?</p>
  
  <p>The button currently looks like this:</p>
  
  <pre><code>&lt;Button Text="Login" Style="{StaticResource LoginFormButton}" /&gt;
  
  &lt;!-- LoginFormButton is defined in App.xaml --&gt;
         &lt;Style x:Key="LoginFormButton" TargetType="Button"&gt;
              &lt;Setter Property="FontSize" Value="18" /&gt;
              &lt;Setter Property="TextColor" Value="{ StaticResource bgColor }" /&gt;
              &lt;Setter Property="BorderRadius" Value="25" /&gt;
              &lt;Setter Property="BackgroundColor" Value="White" /&gt;
          &lt;/Style&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/gBjFh.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gBjFh.gif" alt="Login Animation"></a></p>