Buttons Guide: Make buttons match your theme (without a rave)
Buttons are your profile’s interaction language. This section controls your default button style,
activity feed hover states, and Follow/Unfollow button states.
📸 What you’ll see in Buttons
This matches the Buttons section on the Settings screen.
🧠 The 3 rules that prevent chaos
- Buttons = your accent system. Reuse one accent color instead of random colors.
- Hover should be a reaction. Small change, not a full personality swap.
- Follow vs Unfollow must be clear. They represent different states—SSS gives them separate styling for a reason.
Quick win:
Pick one accent color and reuse it for:
Profile Button Background + Activity Feed Hover + Navigation Active + Link Color.
Pick one accent color and reuse it for:
Profile Button Background + Activity Feed Hover + Navigation Active + Link Color.
🎛 Buttons settings (plain English)
- Activity Feed Button Hover Color — hover/active states in the feed (reactions, hover highlights).
- Profile Button Background Color — default button background across your profile.
- Profile Button Text Color — text color on default buttons.
- Profile Button Hover Brightness — how much buttons brighten on hover (easy hover control).
- Profile Button Glow Style — optional glow effect style.
- Profile Button Radius — corner roundness for default buttons.
If hover feels insane:
Reduce Profile Button Hover Brightness before changing anything else.
Brightness is usually the culprit.
Reduce Profile Button Hover Brightness before changing anything else.
Brightness is usually the culprit.
👥 Follow + Unfollow buttons (state styling)
These controls let you style Follow and Unfollow differently so the meaning is clear.
You can set background/text, hover background/text, border color, border thickness, border style, and radius for each.
- Follow Button … (Background, Text, Hover Background, Hover Text, Border Color, Border, Border Style, Radius)
- Unfollow Button … (Background, Text, Hover Background, Hover Text, Border Color, Border, Border Style, Radius)
State design tip:
Make Follow your “primary” (accent color). Make Unfollow more neutral (so it’s clear but not screaming danger).
Make Follow your “primary” (accent color). Make Unfollow more neutral (so it’s clear but not screaming danger).
✅ Best setup order
- Set Profile Button Background + Text Color (readability first).
- Set Hover Brightness (subtle is premium).
- Set Activity Feed Button Hover Color (so feed reactions match your theme).
- Set Radius (match your UI vibe).
- Style Follow and Unfollow (clear state difference).
🎨 3 “copy-this” button styles
✅ Style 1: Modern Accent Buttons
- Button Background: your accent color
- Button Text: high contrast (off-white or near-black)
- Hover Brightness: ~110%
- Glow: None (or subtle)
- Radius: 8px (or match your UI)
- Follow: accent fill
- Unfollow: neutral surface background
⚡ Style 2: Cyber Glow Buttons
- Feed Hover Color: accent color
- Hover Brightness: 115–125%
- Glow: subtle glow matching accent
- Radius: 8–12px
- Follow: accent fill + subtle glow
- Unfollow: dark neutral + subtle border
🧼 Style 3: Outline Buttons (clean UI)
- Button Background: neutral / darker surface
- Button Text: accent color
- Hover Brightness: ~110%
- Glow: None
- Radius: 4–8px
- Follow: outline + accent border, hover fills
- Unfollow: neutral outline, hover slightly darker
Don’t let hover become a jump-scare:
If hover feels too loud, reduce brightness and turn down glow before changing colors.
If hover feels too loud, reduce brightness and turn down glow before changing colors.
🛠 Troubleshooting (fast fixes)
- Feed reactions don’t match your theme: set Activity Feed Button Hover Color to your accent color.
- Hover is too intense: reduce Profile Button Hover Brightness, then reduce glow.
- Button text is hard to read: change Profile Button Text Color first.
- Follow/Unfollow look too similar: Follow = accent, Unfollow = neutral (or muted caution).
- Buttons feel inconsistent: reuse one accent across Links + Navigation Active + Buttons + Feed hover.
