css - 仅CSS3中的按钮上的动画

我正在尝试在按钮上添加动画。从左到右的褪色png。现在的问题是，它变为父元素的全宽，而不仅仅是按钮上方。

HTML：

<div style="background: yellow; height: 30px">
    <button class="btn-primary btn" style="margin-left: 100px">
        Some button here
    </button>
</div>

CSS：

.btn:hover:not([disabled]):not(.disabled):before, a.btn:hover:not([disabled]):not(.disabled):before, .swipe-glow:hover:not([disabled]):not(.disabled):before {
    -webkit-transition: opacity 0s ease, left 0.4s linear;
    transition: opacity 0s ease, left 0.4s linear;
    left: 100%;
    opacity: 1;
}
.btn:before, a.btn:before, a.btn:before, .swipe-glow:before {
    -webkit-transition: opacity 0.3s ease 0, left 0s linear 0.3s;
    transition: opacity 0.3s ease 0, left 0s linear 0.3s;
    opacity: 0;
    content:" ";
    -webkit-backface-visibility: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 100;
    overflow: hidden;
    background-size: cover;
    background-image: url('//eaassets-a.akamaihd.net/battlelog/bb/bfh/ui/swiping-glow-408c7792.png');
}

JSFiddle：

http://jsfiddle.net/lasseedsvik/keanyvde/

我怎样才能解决这个问题？

最佳答案

加：

.btn {position:relative; overflow:hidden;}

http://jsfiddle.net/keanyvde/4/

关于css - 仅CSS3中的按钮上的动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31242033/