Overview
The login experience for visitors to your website is controlled by the Login button gadget and the Login form gadget. These gadgets control the appearance and function of the login process. The colors and styles applied to these login elements are also set by default, based on the theme you select.
Using CSS code in your Website CSS customization editor, you can change the color and style of a login button or form. Follow the instructions in the sections below and insert the CSS code where indicated.
Pro Tip: For a deeper dive on how login gadgets work, check out these help articles:
Login form gadget
Login button gadget
Where to make the CSS code changes
1. In the Admin view, select Website on the sidebar menu and then CSS on the top menu. 
2. The CSS customization screen displays a code Editor and a Preview area. Find the specific code for the changes you want to make within the appropriate article section below. Copy that code, and then paste it into the Editor panel. 
3. Click Save in the top left corner of the CSS customization screen. Changes will be applied immediately.
Note: The Preview area might not immediately reflect the styling changes. For a better look at the changes, click Save, then click Site pages.
CSS code for the Login button gadget
To change the colors on the Login button
Copy the following CSS code and and paste it into the code Editor panel on the CSS customization screen (navigate to Website > CSS).
/* Login button */
.WaGadgetLoginButton .loginLink, .WaGadgetLoginForm .loginLink {
background: #f37b1c !important;
color: white !important;
}
/* Login button on hover */
.WaGadgetLoginButton .loginLink:hover, .WaGadgetLoginForm .loginLink:hover {
background: #f38c1c !important;
}
/* Logout button */
.WaGadgetLoginButton .authenticated .loginLink, .WaGadgetLoginForm .authenticated .loginLink {
background: 0 !important;
color: #f37b1c !important;
}
/* Logout button on hover */
.WaGadgetLoginButton .authenticated .loginLink:hover, .WaGadgetLoginButton .authenticated .loginLink.hover, .WaGadgetLoginForm .authenticated .loginLink:hover, .WaGadgetLoginForm .authenticated .loginLink.hover {
background: #f37b1c !important;
color: white !important;
}After you have pasted the code into the Editor, change the background values from #f37b1c to whatever color you want as the button background, and change the color values from white to whatever color you want for the icon. Note that you can specify the foreground and background colors differently for the regular state and the hover state of the button.
Click Save in the top left corner of the CSS customization screen. Changes will be applied immediately.
Note: The Preview area might not immediately reflect the styling changes. For a better look at the changes, click Save, then click Site pages.
To change the Login button from an icon to a labeled button
To change the appearance of the Login button from an icon to a button that says Login, locate the appropriate CSS code below according to your website theme, then copy and paste it into the Editor panel on the CSS customization screen (navigate to Website > CSS).
To determine your current website theme, navigate to Website > Theme. The theme name is at the top of the screen. 
Building Blocks theme
Kaleidoscope theme
.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink:before {
font: normal 25px/50px 'Tahoma';
content: 'Profile';
}
.WaGadgetLoginForm .loginContainer.loginContainer .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginForm .loginContainer.loginContainer .loginLink:before {
font: normal 25px/50px 'Tahoma';
content: 'Login';
}Casefile
Tip: For horizontal style, change LoginFormStyle001 to LoginFormStyle002.
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.authenticated.loginContainer.authenticated .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.authenticated.loginContainer.authenticated .loginLink:before {
font: normal 25px/50px 'Tahoma';
content: 'Profile';
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.loginContainer .loginLink{
width: 150px;
height: 50px;
}
.WaGadgetLoginForm.LoginFormStyle001 .loginContainer.loginContainer .loginLink:before{
font: normal 25px/50px 'Tahoma';
content: 'Login';
}Tinted Tiles
.WaGadgetLoginButton .authenticated .loginLink, .WaGadgetLoginForm .authenticated .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginButton .authenticated .loginLink:before, .WaGadgetLoginForm .authenticated .loginLink:before {
font: normal 25px/50px 'Tahoma';
content: 'Profile';
}
.WaGadgetLoginButton .loginLink, .WaGadgetLoginForm .loginLink {
width: 150px;
height: 50px;
}
.WaGadgetLoginButton .loginLink:before, .WaGadgetLoginForm .loginLink:before {
font: normal 25px/50px 'Tahoma';
content: 'Login';
}Click Save in the top left corner of the CSS customization screen. Changes will be applied immediately.
Note: The Preview area might not immediately reflect the styling changes. For a better look at the changes, click Save, then click Site pages.
CSS code for the Login form gadget
To change the colors on the Login form
Copy the following CSS code and and paste it into the code Editor panel on the CSS customization screen (navigate to Website > CSS).
/* Change login button color */
.WaGadgetLoginForm .loginContainer.loginContainer .loginLink {
background: #de625f;
color: white;
}
/* Change login button color on hover */
.WaGadgetLoginForm .loginContainer.loginContainer .loginLink:hover, .WaGadgetLoginForm .loginContainer.loginContainer .loginLink.hover {
background: #de625f;
color: white;
}
/* Change logout button */
.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink {
background: 0;
color: #f56f6c;
}
/* Change logout button on hover */
.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink:hover, .WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink.hover {
background: #de625f;
color: white;
}After you have pasted the code into the Editor, change the background values to whatever color you want as the button background, and change the color values to whatever color you want for the icon. Note that you can specify the foreground and background colors differently for the regular state and the hover state of the button.
Click Save in the top left corner of the CSS customization screen. Changes will be applied immediately.
Note: The Preview area might not immediately reflect the styling changes. For a better look at the changes, click Save, then click Site pages.
