Установить кнопку: до размеров кнопки в CSS

Question

Я впервые возился с CSS-анимацией с псевдоэлементами.

У меня есть кнопка, которую я хочу, чтобы эффект пульсации при нажатии был без JavaScript. Я почти у цели, но элемент моей кнопки ': before' продолжает устанавливать ширину контейнера, а не ширину кнопки.

Есть ли способ, которым я могу установить размеры кнопок ': before' для размеров кнопки без JavaScript? Кроме того, у меня возникают проблемы с фактическим позиционированием элемента: before, в идеале я бы хотел, чтобы он идеально перекрывался с границей кнопки. Так что любой совет с этим очень помог бы!

Вот кодовая ручка (использует sass): https://codepen.io/NotDan/pen/qvKvQv

• Эффект работает так, как я хочу, это всего лишь выравнивание и размер элемента: before, с которым мне нужна помощь

Вот 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;
}

Вот 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

Я поэкспериментировал с вашим кодовым пером и обнаружил, что вам просто нужно добавить position: relative; к вашему .custom-btn-#{$color} классу.

Ваш псевдоэлемент :before уже имеет значение position: absolute, но в данный момент он позиционируется в столбце, а не в самой кнопке.