Button Design Guide
The Connect with PayPal button employs the Identity API which includes many built-in properties that ensure a consistent design experience for all PayPal Partners.
Using the standard versions of the button on your site will trigger an immediate association for your users with the high-quality experience they have come to expect from PayPal.
See the Button Builder for these standard buttons.
To create your own customized version of the button, follow these guidelines:
When you use Connect with PayPal to enable account creation and login, use either the label
Connect with PayPal or
Continue with PayPal. We recommend those labels because they most accurately reflect the purpose of the button. Since Connect with PayPal is the label we use for our default button, when you use it on your customized button, users will have strong recognition of the brand which drives higher conversion. Depending on the context of your website,
Login can also be good choices.
You can choose the font, font weight, and kerning that fits your app or website style. Keep in mind that easy legibility is always important. The smallest size we recommend is 13 pt and Sans-serif typography.
Color and contrast
Color has immediate impact. The more quickly users can tell what your button is and what brand it represents, the more confident they will be to use it and the more seamless their experience on your website will be.
We recommend button background colors of gray #EEEEEE and the PayPal accessible blue #0070BA. Since PayPal is a well-known and trusted brand around the world, using these colors also enhances the brand recognition for users.
To ensure good contrast and legibility, use white font color on dark backgrounds and black font color on light backgrounds. If you decide to use other colors that are more appropriate for your app or site, always choose a combination of colors that fit within accessibility parameters.
For best results always put the button over white or light backgrounds.
Size and shape
Depending on the devices and context of the user action, always use an appropriate size for your button. For example, on mobile apps always use the button close to the thumb position and be sure it is big enough to be tapped. Keep in mind that larger buttons tend to lead to higher conversion rates.
These are the minimum sizes you can use for padding and margins. If needed, you can scale the size upwards, but you should always try to balance the proportion of all of the elements.
You can use any button shape that works for your app or site, but we recommend the pill-shaped button because its strong association with PayPal will lead to faster recognition by users. A rectangle-shaped button is also available.
PayPal icon monogram
Use the correct PayPal icon from PayPal Logo and Marks. The PayPal icon is available in various sizes for button scaling, but the proportions and typography style must stay consistent with the ones described on the original button.
Use the version of the PayPal icon that matches the color on your button. If you are using a colored button, use the white version. If you are using a white button, use the colored version of the PayPal icon.
Don't use any other icon or an outdated version or custom variation. That can give the impression that your app is outdated or untrustworthy.
Do's and Don'ts
|You can increase the size of the margins (left and right) to adjust for your implementation.
||Do not reduce the minimum size of the padding.
Do not change the aspect ratio of the elements.
Never change the alignment and the position of the elements within the button.
Do not stretch any of the elements on the button. Elements must always maintain their proportions.
|Although we do not recommend changing the color of the button, you can do that if it results in a more accessible button for your site.
||Do not change the background color on the colored version of the button.
|Although we do not recommend changing the shape, you can customize it to one that makes sense with your site as long as you always maintain the minimum sizes for paddings and margins.
In context messaging
Including messaging next to your button can add more context and clarity on what is going to happen next and the actions the button will trigger.
It is good to reassure users that your app won’t actually see or do any money transactions on their behalf and will never share anything private without their consent or being notified.
Examples of in context messages:
We don’t share your money transaction history.
We'll never transact anything without your permission.
Examples of benefits statements:
Connect with PayPal pre-fills your shipping address and preferred payment method while offering all the security of PayPal.