Info: How to change the ConnectButton Styling

[0xKurt]

Just like many others i encountered the problem that the ConnectButton styling can not be simply changed.
Only way is a customized button and that's pretty painful.
After some experiments i found out that you can utilize the ju367v7o CSS class to style the ConnectButton without destroying the whole modal design. It's a pretty dirty approach, but it works.

Example:

.ju367v7o {
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.85) !important;

  padding: 8px 25px !important;
  height: auto !important;

  box-shadow: 0 0 5px rgba(229, 223, 232, 0.3) !important;
  background: linear-gradient(0deg, #5e2374 0%, #ad33cc 100%) !important;

  border-radius: 5px !important;
}

Note: It's necessary to declare everything as important to overwrite the original values.

My styled ConnectButton:

All other styling is untouched:

#590 #1117

[jcislo]

Just a note. The actual class name may be different for everyone, or it changes with version/theme/settings. For me it was ju367v78.

[magiziz]

@0xKurt You can also create your own custom connect button with your own styling which should be pretty straight forward.

Feel free to follow the docs here

[Xyzjesus]

hi, i think it's not easy to rewrite a connect button from zero if i need only change button height and text-align. is't possible to make styling simpler?
@0xKurt method is awesome but need to find right className for styling

[magiziz]

We don't have a way to add height and width for the connect button. We could introduce a prop that can change the button size like "M" for medium, "L" for large and etc.