# Login button

{% hint style="warning" %}
In Q1 2025, the Chiliz team will decommission several endpoints and features. This is to ensure that the Socios.com API remains focused on the Socios.com app features, and to bring it always closer to the Web3 ecosystem. 

Don't worry! We will provide you with alternatives right here on this documentation site.

You will find more information [in this guide](https://connect.socios.com/partner-api/2025-api-update-overview), and in each API section of this site.
{% endhint %}

{% hint style="danger" %}
As part of the 2025 API Update, the Login button is decommissioned in favor of building your own wallet integration. [See this documentation](https://docs.chiliz.com/develop/advanced/how-to-integrate-socios-wallet-in-your-dapp).
{% endhint %}

## Description

Partner applications can use the Socios.com login button to allow their users to log into their Socios.com account from a third-party environment. 

Clicking on this button opens the Socios.com Connect login modal (such as any OAuth login system such as Google's, Facebook's, etc.) which in turn allows the third-party application to access Socios.com user data on the user's behalf.

## Sample button

{% hint style="info" %}
*This example doesn't onboard all the OAuth mechanism, this is only a front-end example.*

*To fully implement it, you will need to dive into the rest of the Partner API documentation, notably the* [authentication](https://connect.socios.com/partner-api/authentication "mention") part.
{% endhint %}

Here is the official Socios.com login button:

![](https://31329255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMDcaoJLMj5Y3jzFMTONF%2Fuploads%2FLjILdF8bDjJv4YfxPmXo%2Fimage.png?alt=media\&token=cc3f3e38-065c-475f-9da0-d22f287fabf6)

And here is the needed CSS code to display it into a partner website:

{% code overflow="wrap" fullWidth="false" %}

```html
<style>
  .sociosComLoginButton {
    background-color: rgb(0, 33, 55);
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    padding: 15px 20px;
    white-space: nowrap;
  }

  .sociosComLoginButton:hover {
    background-color: rgb(0, 46, 77);
  }

  .sociosComLoginButton span {
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .sociosComLoginButton img {
    margin-right: 10px;
  }
</style>

<button type="button" class="sociosComLoginButton">
  <span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIbSURBVHgBpVRLbhpBEK0qMJEAybAI3lhJs0giK4hM32C4gXMD5wTGJyA5Ac4JjE9gbgA3GPMLSybrYGUixYlkM12pxgwM4yHK50mt/lT1e1X9KQSB53kqk8u5bIyDQM8ZwbHrwKxggwAQA2T2ATBgMAMD0Idi8VpXqwEOh+O2bGzC/8DAWZYJj0V5rYrAfZl9RqLrpL9ErKQrIeIb2eKuDQStbDGfV99vbyVq6NRrtXfwh/C8qcpkF20GCUTIqVDILw0h8yX8BbQ+8iG2h8rlMvwrQjn8NVFubw8OKk+BEJ00Z2Z2ePv2UkHS/INKBZ4dHp56s1kpQXIinSettxpvIUOkVsPAEi3zLO3vK0cpb4e6XbsQm21rsfDuritXeSnPpxspn/M2WrGoXGmzmM2OXdgFMTYTZFdRdLaX1tkllkamUtRL8TP7nT2NMEp1liYWBN++xsg232swGr0fDMbNxAZ3l9pwPO59md9ERK5ds7cGZpHtAHJLHNqRs/ynPsYeXARvOlX2n81v5nb60fot/dcOw8kJIV8Ig28y1NBH8gWSJJOJQwxXtrw8yeX8Vy9f6EiMIiddf90xwB+sEy3C2Wg0aVn1TfqfTslwb1mjROznj7ARjxgfqcp5EWBrlZ+PDFJOuCSlxX1Ygn54X3irdXUr7UdED2kOj4ky7USFBINwpmu187Q9lLao6/WuuaeGff5RFGaBeheJxS+TpX6sx8ZIugAAAABJRU5ErkJggg==" />Connect with Socios.com</span>
</button>
```

{% endcode %}