The Premagic event widget shows two login buttons on its registration screen a LinkedIn button and an Email button. You can restyle both to match your brand by dropping a small CSS snippet into your event's custom CSS field. This article lists every color, padding, and radius you can override, and includes a ready-to-use prompt you can paste into ChatGPT / Claude / any LLM to generate the CSS for you automatically.
What you can customize
-
LinkedIn button: background color, icon badge color, text color, hover colors
-
Email button: background color, text color, hover colors, padding, font size, border radius
What you can't customize (today)
-
The button layout / order on the page
-
The button copy (use the widget text settings instead)
-
Adding other social providers, LinkedIn is the only social login supported right now
Where the CSS goes
You add this CSS on your own website — the site where the Premagic widget is embedded. Drop it into a <style> tag in your site's <head>, or add it to your site's global stylesheet, right alongside your other custom styles. Scope all the style under a class name which is added on your page(eg. .your-class ) so that all the style has a higher specificity
🤖 Let an AI design it for you
Copy the entire block below into ChatGPT, Claude, or your LLM of choice. At the bottom, replace the <fill this in> line with your brand colors (or a description like "modern, navy + coral"). The LLM will return a CSS snippet you can paste straight into your widget's Custom CSS field.
You are helping me design the login buttons on my Premagic event registration widget. Produce a single CSS block that overrides the CSS custom properties listed below. Rules:
- Do NOT invent class names. Only use the selectors listed.
- Do NOT restyle anything outside the two buttons.
- Ensure sufficient contrast between text and background (WCAG AA).
- Output only the final CSS. No explanation.
## Buttons on the page
1. LinkedIn social button — `.premagic-social-button--linkedin`
2. Email button — `.premagic-button-email`
Selectors you may target:
| Button | Selector |
|----------------|-----------------------------------------------------|
| LinkedIn | `.premagic-social-button--linkedin` |
| LinkedIn icon | `.premagic-social-button__icon` |
| LinkedIn text | `.premagic-social-button__text` |
| Email | `.premagic-button-email` |
## Social button variables
| Variable | Default | Effect |
|---------------------------------------------|-----------|-----------------------|
| `--premagic-social-button-bg` | `#0655a6` | Background |
| `--premagic-social-button-color` | white | Text color |
| `--premagic-social-button-icon-bg` | `#0b66c3` | Icon badge background |
| `--premagic-social-button-icon-color` | white | Icon color |
| `--premagic-social-button-hover-bg-color` | `#054c93` | Hover background |
| `--premagic-social-button-hover-text-color` | white | Hover text color |
## Email button variables (set on `.premagic-button-email`)
| Variable | Effect |
|--------------------------------------|----------------------|
| `--premagic-button-bg-color` | Background |
| `--premagic-button-text-color` | Text color |
| `--premagic-button-hover-bg-color` | Hover background |
| `--premagic-button-hover-text-color` | Hover text color |
| `--premagic-button-shadow-color` | Hover box-shadow |
| `--premagic-button-border-radius` | Corner radius (8px) |
| `--premagic-button-font-size` | Font size |
You may also set `padding` directly on `.premagic-button-email`.
## Built-in tokens you can reuse
- Colors: `--premagic-color-white`, `--premagic-color-black`, `--premagic-color-gray-darker|dark|—|light|lighter|lightest`, `--premagic-color-blue-dark|—|light|lightest`
- Spacing: `--premagic-spacing-1..8` (4px steps)
- Radius: `--premagic-border-radius` (8), `-md` (12), `-lg` (16)
## Example output format
```css
:root {
--brand-primary: #3b2e79;
--brand-primary-dark: #190965;
}
.your-class .premagic-social-button--linkedin {
--premagic-social-button-bg: var(--brand-primary);
--premagic-social-button-icon-bg: var(--brand-primary-dark);
--premagic-social-button-hover-bg-color: var(--brand-primary-dark);
}
.your-class .premagic-button-email {
--premagic-button-bg-color: var(--brand-primary);
--premagic-button-text-color: #fff;
--premagic-button-hover-bg-color: var(--brand-primary-dark);
--premagic-button-hover-text-color: #fff;
}
here is a example
https://codepen.io/Anenth-Vishnu/pen/JoRLBYz