我是第一次弄乱带有伪元素的CSS动画。
我有一个按钮,希望在单击时产生波纹效果,而无需使用javascript。我快到了,但是我按钮的':before'元素一直将自身设置为容器的宽度,而不是按钮的宽度。
有没有什么方法可以将按钮':before'的尺寸设置为不使用JavaScript的按钮的尺寸?另外,我在:before元素的实际位置上遇到麻烦,理想情况下,我希望它与按钮的边框完全重叠。因此,任何有关此的建议都将大有帮助!
这是codepen(使用sass):https://codepen.io/NotDan/pen/qvKvQv
这是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>
答案 0 :(得分:2)
我玩过您的Codepen,发现您只需要向position: relative;
类中添加.custom-btn-#{$color}
。
您的:before
伪元素已经是position: absolute
,但它当前正在将其自身定位在列中,而不是按钮本身。