SSS Buttons Guide: Colors, Hover, Glow & Follow Controls
Buttons tell visitors where they can take action. Every button should be easy to read, easy to tap, and clearly different when it is selected or unavailable.
Loading matched recommendations...
Settings in this guide
- Profile Button Background Color: the normal button color.
- Profile Button Text Color: the label color.
- Profile Button Radius: 0px, 4px, 8px, 12px, 16px, 24px, or 999px.
- Profile Button Glow Style: None, Soft, Neon, Hot Pink, or Matrix Green.
- Profile Button Hover Brightness: 90%, 100%, 110%, or 125%.
- Activity Feed Button Hover Color: the highlight used for feed actions and reactions.
- Follow and Unfollow settings: separate colors, text, borders, hover choices, and rounded corners.
This picture shows the older Classic Backup view. The setting names can still help you find the same choices in Studio Editor.
Whole Home and Room designs
Whole Home can give every Room the same button style. Use a Room design only when one area needs calmer or bolder actions.
Whole Home
Use it for the shared look that Rooms follow unless you give a Room its own design.
One Room
Use it when only one part of your Digital Home needs a different look.
Private Draft
Studio keeps your changes private until you publish them.
Classic Backup
Classic Backup changes the public Whole Home as soon as saving finishes.
Recommended order
- Set the normal background and text colors.
- Choose 100% or 110% Hover Brightness to start.
- Set Activity Feed Button Hover Color.
- Choose rounded corners that match the rest of the profile.
- Add glow only after the text is easy to read.
- Make Follow and Unfollow look clearly different.
- Check mouse hover, keyboard outline, disabled buttons, and phone taps.
Make buttons easy for everyone
- Keep button text readable in normal and hover states.
- Do not remove the visible keyboard outline.
- Do not use glow as the only difference between Follow and Unfollow.
- Use enough padding so buttons are easy to tap on a phone.
- Very bright glow can hide the button edge or label.
- Unavailable buttons should look unavailable but still remain readable.
Starter button styles
Modern accent
110% hover, None or Soft glow, 8–12px rounded corners, bright Follow, and neutral Unfollow.
Cyber glow
110–125% hover, Neon or Matrix Green glow, and 12px rounded corners.
Minimal outline
100% hover, no glow, 4–8px rounded corners, and a clear border.
Reading Room
100% hover, no glow, strong contrast, and a clear keyboard outline.
Loading matched recommendations...
Common fixes
Buttons feel too loud
Use 100% hover and turn down or remove glow.
Text is hard to read
Increase the difference between the button and label colors.
Feed actions clash
Match Activity Feed Button Hover Color to the main accent.
Follow and Unfollow look the same
Change the background, border, or label so the current state is obvious.
Keyboard outline is missing
Remove any CSS that hides outlines, or restore a clear outline in Code.
Wrong Room changed
Check the selected Room and publish destination.
FAQs
Which hover brightness should I start with?
100% or 110%.
Should Follow and Unfollow use opposite colors?
They should look different, but they can still belong to the same color family.
Can Rooms use different button styles?
Yes, when those settings are available for the selected Room.
Why is 999px available?
It makes a pill-shaped button.
Can glow replace contrast?
No. The label still needs to be easy to read.
What should I test besides hover?
Keyboard use, disabled buttons, phone taps, and Follow or Unfollow states.
Why did feed actions change?
They use the separate Activity Feed Button Hover Color.
What is the quickest safe reset?
Set Glow to None and Hover Brightness to 100%, then check the colors again.
Loading matched recommendations...
