Buttons Guide
Buttons are your action language. The goal is clear click states without overpowering the rest of your profile design.
Fast path: button bg/text -> hover brightness -> feed button hover color -> radius -> glow -> follow/unfollow states.
Core Button Fields (Current Stack)
- Profile Button Background Color: default button background color.
- Profile Button Text Color: default button label color.
- Profile Button Radius:
0px, 4px, 8px, 12px, 16px, 24px, 999px. - Profile Button Glow Style:
None, Soft, Neon, Hot Pink, Matrix Green. - Profile Button Hover Brightness:
90%, 100%, 110%, 125%. - Activity Feed Button Hover Color: hover/active/reaction states for activity feed post options.
Buttons controls from your settings screen.
Stack note: these core button controls are defined in your schema under
Profile_Colors and power the button behavior users see in the Buttons area.
Follow and Unfollow States
Your UI also includes dedicated Follow/Unfollow controls (background, text, hover background/text, border color, border width/style, and radius) so state meaning stays clear.
- Follow state: use your primary accent and strongest visual priority.
- Unfollow state: keep neutral/muted to avoid accidental destructive emphasis.
Buttons Workflow
- Set background + text first for default readability.
- Set hover brightness (usually
100%or110%for clean behavior). - Set activity feed hover color to align reaction/action states with your accent.
- Set radius and glow to match your overall style language.
- Finalize Follow/Unfollow states so they are visually distinct but consistent.
Starter Recipes
Modern Accent
- Hover Brightness: 110%
- Glow: None or Soft
- Radius: 8px or 12px
- Follow: accent fill
- Unfollow: neutral surface
Cyber Glow
- Hover Brightness: 110% or 125%
- Glow: Neon / Matrix Green
- Radius: 12px
- Feed Hover Color: same accent family
- Unfollow: dimmer variant for separation
Minimal Outline Feel
- Hover Brightness: 100%
- Glow: None
- Radius: 4px or 8px
- Follow: accent border + subtle fill on hover
- Unfollow: gray border + muted hover
Common Fixes
- Buttons feel too loud: drop Hover Brightness to
100%and reduce glow style. - Button text is hard to read: increase contrast between background and text color first.
- Feed actions clash with profile theme: align
Activity Feed Button Hover Colorto your accent system. - Follow and Unfollow look identical: separate their background and border treatments.
- UI looks inconsistent: unify accents across Links, Navigation Active, and Buttons.
FAQs
What should I configure first in this section?
Set base colors/readability controls first, then style polish.
How many changes should I do per save?
One change at a time for reliable troubleshooting.
What should I verify after each change?
Readability, contrast, and interaction clarity on desktop and mobile.
When should I use advanced CSS?
After standard controls are stable and only for targeted overrides.
How do I avoid visual clutter?
Keep one dominant accent and reduce competing effects.
What is the fastest rollback?
Revert the last change first and retest before further edits.
