Lighter Button Color on Hover

Hi guys,

I’m trying to adjust a theme to my liking and I’m having issues with finding the css variable for changing the button background color to a lighter shade when on hover.
I want it to be able to generate a lighter shade of the button color with any color that I choose for the button.

I’ve looked and looked and tried things, and couldn’t find the answer.

Thanks!

I think if you share the theme you are working with and a screenshot or two of the button(s) you’d like to change, it will be easier for others to offer some assistance.

Thanks for the input!

The theme is Obsidianotion.
The mentioned buttons are the cyan-colored ones on the screenshot.

Those particular buttons look like they are taken care of with this CSS:

@media (hover: hover) {
  button.mod-cta:hover {
    background-color: salmon;
  }
}

CleanShot 2023-11-05 at 10.43.57


If you haven’t yet, I’d have a read though this topic:

Thanks ariehen, but I know how to change the color on hover to a different one. What I’m after is for it to be automatically lighter (on hover) than its original color, without having to write exactly what color I want it change it to.
So let’s say that the button’s color is salmon to begin with, and then on hover it’s salmon but 50% lighter/lower opacity.
I want to be able to choose from any color for the buttons in the Style Settings and have the button always be automatically the same color but lighter on hover.
Hope that makes sense…

Got it.

I thought maybe background-color: rgba(var(--interactive-accent-hover), 0.6); could be easy, but that doesn’t work with it not being rgb to begin with.

So, there’s probably a better way to do this (there always is), but following the trail from the original →

@media (hover: hover) {
  button.mod-cta:hover {
    background-color: var(--interactive-accent-hover);
  }
}

interactive-accent-hovervar(--color-accent-2); → there are two defined; one for the light theme and one for the dark theme:

.theme-light {
      --color-accent-2: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15));
}
.theme-dark {
      --color-accent-2: hsl(calc(var(--accent-h) - 5), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.29));
}

You could make a new one, let’s say --color-accent-3, for both theme modes and play around with the values until you get something you like. It’s worth a shot.

.theme-light {
      --color-accent-3: hsl(calc(var(--accent-h) - 2), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.30));
}
.theme-dark {
      --color-accent-3: hsl(calc(var(--accent-h) - 7), calc(var(--accent-s) * 0.55), calc(var(--accent-l) * 1.0));
}

@media (hover: hover) {
  button.mod-cta:hover {
    background-color: var(--color-accent-3);
  }
}

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.