Any way to control hover states colors?

[smlombardi]

Nice work, to create a simple button. But I'd like to set the hover color to a completely different color. No way to do this?

[jhardy]

There is a couple way to approach this.

There is a configuration variable, $sb-auto-states. If you set it to false like this. $sb-auto-states: false;

The hover and active states will not be generated for you on all buttons.

Another approach is to override it at the mixin level. Depending on what mixin you are using, the last parameter is the auto-states, which if set to false will not generate, the hover and active states @include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states)

@include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states);

so for example you can do something like this.

.button { 
  @include sassy-button("matte", 10px, 16px, red, blue, #fff, "inset", false);

  &:hover {
   @include sassy-button-gradient("matte", green, purple, fff, "raised", false);
  }
}

Something like this should work, but this is just from memory and I havent tested the code above so it made need a few tweaks.

In my next release I will expose a new gradient that can be used to just adjust the hover and active states. Hopefully I will be able to get to it soon. Let me know if you have any more questions or this doesn't work as expected.

Thanks.

[smlombardi]

Thanks, that's helpful.

The two things I am most often asked to do with buttons is vary the padding and the hover color.

For Bourbon, I was able to add a new conditional mixin for tighter buttons, but the color thing is still hard. Would be great to have an extra parameter that, if present, becomes the hover color. OTherwise a regular Sassy Button.

On Nov 19, 2012, at 3:26 PM, Jared notifications@github.com wrote:

There is a couple way to approach this.

There is a configuration variable, $sb-auto-states. If you set it to false like this. $sb-auto-states: false;

The hover and active states will not be generated for you on all buttons.

Another approach is to override it at the mixin level. Depending on what mixin you are using, the last parameter is the auto-states, which if set to false will not generate, the hover and active states @include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states)

@include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states);

so for example you can do something like this.

.button { @include sassy-button("matte", 10px, 16px, red, blue, #fff, "inset", false);

&:hover { @include sassy-button-gradient("matte", green, purple, fff, "raised", false); }

Something like this should work, but this is just from memory and I havent tested the code above so it made need a few tweaks.

In my next release I will expose a new gradient that can be used to just adjust the hover and active states. Hopefully I will be able to get to it soon. Let me know if you have any more questions or this doesn't work as expected.

Thanks.

— Reply to this email directly or view it on GitHub.