Question

我是第一次弄乱带有伪元素的CSS动画。

我有一个按钮，希望在单击时产生波纹效果，而无需使用javascript。我快到了，但是我按钮的'：before'元素一直将自身设置为容器的宽度，而不是按钮的宽度。

有没有什么方法可以将按钮'：before'的尺寸设置为不使用JavaScript的按钮的尺寸？另外，我在：before元素的实际位置上遇到麻烦，理想情况下，我希望它与按钮的边框完全重叠。因此，任何有关此的建议都将大有帮助！

这是codepen（使用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

我玩过您的Codepen，发现您只需要向position: relative;类中添加.custom-btn-#{$color}。

您的:before伪元素已经是position: absolute，但它当前正在将其自身定位在列中，而不是按钮本身。

设置按钮：在CSS中按钮尺寸之前

1 个答案: