I want to achieve a button where there will a border behind the button. I have gone through many methods but the closest one is Using Box Shadows the code looks something like this:
.button-with-bg-outline-shadow a{
box-shadow:
12px 8px 0 0px #042036,
14px 7px 0 0px var(--e-global-color-a29f98a ),
14px 9px 0 0px var(--e-global-color-a29f98a ),
10px 8px 0 0px var(--e-global-color-a29f98a );
transition: all .3s linear;
}
but the problem with this is when I have different background, I need to change colors in the box-shadow property and thus I need to write new CSS for every button separately.
Demo: https://imgur.com/j9BChj4
I want the area covered by the outline should be transparent so that I can reuse one element everywhere.
2
Answers
Create a pseudo-element by inheriting some of its parent’s properties. Then apply a mask to cut out the inner area.
Use
:after
+ css variables +currentColor
. This is funcy buttons 🙃: