ASP.NET Identity login with custom Facebook & Google buttons

Question

I creating a website that uses Facebook & Google authentication for account registration. I have it functioning correctly, but I want to customize the buttons that display on the Login page. I'm not sure how these buttons are being created. On the Login.cshtml page:

<section id="socialLoginForm">
    @Html.Partial("_ExternalLoginsListPartial", new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl })
</section>

From the rendered HTML page:

<form action="/Account/ExternalLogin" method="post"><input name="__RequestVerificationToken" type="hidden" value="BHNMCUkwp2vT26dQmD98yK52RaMQ18VkBeuH8ukS15WbRxofMAdbrGOoc0qS6HWvRUWgnJM6_tlkaDktGwCQVKS6hiD_gsH8242nckCrzBE6HKgH-OZsETVWj5nYYcxWj8u7nQ8CpFK6KzR8rDJyrg2" />            
    <div id="socialLoginList">
        <p>
            <button type="submit" class="btn btn-default" id="Google" name="provider" value="Google" title="Log in using your Google account">Google</button>
            <button type="submit" class="btn btn-default" id="Facebook" name="provider" value="Facebook" title="Log in using your Facebook account">Facebook</button>
        </p>
    </div>
</form>

I'm not sure how I can create a different stylized custom button for Facebook and Google and have them link directly to the appropriate external login pages?

Answer 1

_ExternalLoginsListPartial is a partial view you have in your views folder. Look for it, and there should be the buttons html code or razor. That's where you can customize the buttons. And for the customization, I've always used this lib But of course, you can always make your own ones.