Use CSS styles and data attributes to display and configure Sign In with Apple buttons in browsers.
- Sign in with Apple JS
You can specify which button type to display for a Sign In with Apple button, and edit its appearance and size it to fit your webpage. For a description of the button types and usage information, see Sign In with Apple Buttons in Human Interface Guidelines.
Create a Wrapper Tag
Create a wrapper tag and set the
id to “
appleid-signin”; for example,
Specify Property Values
Here’s an example of how to create and display a black Sign In with Apple button. A description of the properties you set follows the example.
Control the size of the button by adding a class that contains the desired CSS
height styles. The above example creates a button that’s 210 pixels wide and 40 pixels high.
Specify the type of Sign In with Apple button to draw by setting the
data-type property to one of the following values:
sign in. (Default) For the Sign In with Apple button.
continue. For the Continue with Apple button.
Specify the background color of the Sign In with Apple button by setting the
data-color property to one of the following values:
black. (Default) Sets the background of the button to black.
white. Sets the background of the button to white.
Specify the border for the Sign In with Apple button by setting the
data-border property to one of the following values:
false. (Default) The button doesn’t have a border.
true. Draws a border around the button.