Custom colours?

[PaulWalkerUK]

Is there a way I can set custom colours for buttons, using for example RGB values? Is there anything I can add to Custom CSS to create my own Styles perhaps, or if not, can I override the existing ones?

[Terrance]

You can use a Bootstrap button CSS generator like this one to make a custom colour, add the resulting code to Homely's custom CSS field, then use the wand button in the list of button styles to specify a class name.

(The linked generator uses "custom" as the class name -- you'll need to replace that with something else when adding multiple options.)

[PaulWalkerUK]

Thanks, I've got that working now

[Droyk]

Not working!! @Terrance

This is what the above-linked generator provided me

.btn-custom {
  background-color: #D139BD;
  border-color: #D139BD;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
  background-color: #c32daf;
  border-color: #ae299d;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
  background-color: #D139BD;
  border-color: #D139BD;
}

I pasted the above into the Homely's custom CSS field than I added custom as a class name It didn't work it gave me a default grey colour then I added btn-custom as a class name. it only worked in a preview, but after hitting save it gave me black background & blue text, which you can see below.

[Terrance]

You need to enter custom rather than btn-custom in the class prompt.

[Droyk]

It worked. it's weird I tried that before it didn't work or I never tried to save it coz I saw the grey preview.

but if I add btn-custom as my class name it shows correct colour preview as soon as I hit ok I wonder why is that though?

[Droyk]

@Terrance is there is any way to not to change the text colour while hovering over the link button

normal button

if a user hover over it

[Droyk]

Don't worry about it. it seems I just needed to add color: #fff; in the code to get the desired effect. it seems fine now.

[iDeeLaw]

Don't worry about it. it seems I just needed to add color: #fff; in the code to get the desired effect. it seems fine now.

Mind posting what it looks like when you added the "color: #fff;" ? Ty! @Droyk