Set button:before to dimensions of button in css - html

Question

I'm messing around with CSS animations with pseudo elements for the first time.
I have a button that I want a ripple effect on click, without javascript. I'm almost there, but my button's ':before' element keeps setting itself to the width of the container rather than the width of the button.
Is there any way that I can set the dimensions of the buttons ':before' to the dimensions of the button without JavaScript? Also, I'm having trouble with the actual positioning of the :before element, ideally I would like it to perfectly overlap with the button's border. So any advice with that would help a lot!
Here's the codepen (uses sass): https://codepen.io/NotDan/pen/qvKvQv
the effect is working the way I want it to, it's just the alignment and sizing of the :before element that I need help with
Here's the css:
.custom-btn-primary {
display: block;
background: rgba(0, 0, 0, 0);
color: #d98324;
border: 2px solid #d98324;
padding: 0.5rem 1.5rem;
text-transform: uppercase;
transition: all 0.5s ease-in-out;
}
.custom-btn-primary:hover {
color: #e5a864;
border: 2px solid #e5a864;
transition: all 0.5s ease-in-out;
}
.custom-btn-primary:before {
content: "";
background-color: rgba(0, 0, 0, 0);
border: 2px solid #d98324;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.custom-btn-primary:focus {
outline: 0;
background-color: #d98324;
color: #230007;
font-size: calc(1em + 2px);
border: 0;
}
.custom-btn-primary:focus:before {
animation: ripple-out 0.5s ease-out;
}
Here's the html:
<div class="row">
<div class="col-12 col-md-4">
<button class="custom-btn-primary">primary</button>
</div>
<div class="col-12 col-md-4">
<button class="custom-btn-secondary">secondary</button>
</div>
<div class="col-12 col-md-4">
<button class="custom-btn-light">light</button>
</div>
</div>

Answer 1

I played around with your codepen and found that you just need to add position: relative; to your .custom-btn-#{$color} class.
Your :before pseudo element is already position: absolute but it’s currently positioning itself to the column instead of the button itself.