External Login Buttons Customization

We can customize look and feel of login buttons to make them better. For example, we can use CSS to customize buttons. It is simple task using many available and mostly free styles found on Internet.

Very simple CSS style to use and also looking good is the set of 42 Zocial CSS social buttons (from http://zocial.smcllns.com). To use these buttons, we need to follow

below steps:

1. Download the social buttons CSS style sheet and images from GitHub (https://github.com/samcollins/css-social-buttons).

2. The downloaded file is a compressed Zip file. Un-compress the file to a folder.

3. The folder includes a sub folder css. Add the css style sheet file from the css sub folder to Content folder of the application (either drag and drop the css file to Content folder of the application in Visual Studio or right click Content folder in Visual Studio and select Add => Existing Item and browse for the css file).

4. Modify App_Start/BundleConfig.cs file and include the CSS style sheet in css bundle as follows:

5. Tell buttons to use the styles. To do it, open the Views/Account/_ExternalLoginsListPartial.cshtml partial view and modify the <button> tag and include class attribute as follows:

6. Repeat step 5 in Views/Account/_RemoveExternalLoginsPartial.cshtml partial view.

7. Save all files, rebuild solution and run application. In the login page, we will see the new login buttons as shown in figure below: