Valo: How to remove the huge padding in link button?

Flow
1

Hi everyone, first congrats on new theme, it is very good.

I use a lot the BUTTON_LINK theme from Reindeer, and I know Valo also has it,
but it seems the Valo theme leave a padding in the button.

I already tried adding the BUTTON_TINY to my button, but it didn’t work.
Tried to remove the padding from the button, and it doesn’t work.

Any help? Is this a bug?

2

The link style button has the same dimensions as the regular button so that it can align nicely with regular buttons for instance in a toolbar which might have something like “Submit” and “Cancel” buttons, where the cancel button would be a link style. So it is intentional and not a bug.

To remove the padding, add the following to your theme (no Sass variables or mixin for these at the moment):

.v-button-link {
  height: auto;
  padding: 0;
}
3

Thanks Jouni, it works.

There is still some padding, but I think it’s from the font size/family.

4

Hi,

In valo Nativebutton has some default padding on top. I have tried some CSS to remove it, but it is not working.

My button is of 18px height and i’m getting around 9px of padding at top.

I don’t need any padding at top. How can i achive? Please Help!

5

Hi,

It might be the default line-height (1.55) which is causing the extra space. Try setting the line-height to 1.