Whenever I am Placing two buttons side by side I often want to have one filled and one outlined. The Problem here is, that the outlined button has, by default, applied those 2px borders which results in a larger button than the filled one.
I always have to manually add that border to the filled button too.
Wouldn’t it be possible to apply a border to all buttons by default? This way they would get all the same height!
Maybe other box-sizing parameters could also be a solution for that (never played that much with those CSS-Tricks so I’m not sure 
)
1 Like
Hi,
Agree!!! Already asked but no answer yet.
In the meantime, setting borders in theme style for the different button styles solves the problem.
1 Like
Hey, yeah thanks I did it that way, but as you surely know I also have to change that border whenever I change my color-settings, since the “primary” “secondary” … colors doesn’t apply to that custom border then! 
@wolfgang
Setting a 2px solid transparent border for default style seems to work?
Hey @Sridhar ,
thanks a lot - that did the trick.
Although I don’t completely understand why, does it inherit the color of the button then? I see that the transparent-color is not accepted (screenshot), so I guess it automatically inherits the color then (didn’t find a hint in the inspector for that).
Cheers
Even though border-color of rgba(0, 0, 0, 0) seems to be struck off as if it’s being overridden by some other rule, it is what actually gets applied in this case. You can check this in Computed tab.
rgba(0, 0, 0, 0) is the same as transparent, I guess.
Another way to achieve this style easily inside Bricks is to use a box shadow of ex. (0,0,0,3) and then have it set to inset. It cannot be set in themestyles, you would have to create a class on a button and make the change there but then reuse the class the new buttons.
You can adjust the last value to determine the size of the border btw.
