Variants
In this section we present all button color variants that we have predefined manually. All variants support all seven statuses. The individual themes can define further variants.
NOTE If you need a button in another color combination, try the Custom Colors, see below.
Which variant to use
The variant expresses what the button does, not which color fits the page. This rule applies to every web.
| Purpose | Variant |
|---|---|
| Single link or call to action to Finanzen invest (formerly zero) | .button--invest; exceptions .button--invest-crypto and .button--invest-outline |
| Buy, trade, long, “L”, “K”, call | .button--buy |
| Sell, short, “S”, “V”, put | .button--sell |
| Buy/sell pair, even when both lead to invest | .button--buy / .button--sell, so the direction stays visible |
| Partner with its own variant (Oskar, Flowbank, Cornèrtrader, Selma Finance, Swissquote) | its own variant |
| Everything page specific: forms, search, toggles, “read more” | basic, .button--primary, .button--secondary |
| States: success, destructive action, warning | .button--success, .button--danger, .button--warning; never for buy or sell |
.button--buy and .button--sell exist since v1.31.19. Older versions render them as a basic button.
In the next section, all the button variants are presented as examples.