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

Question

我正在尝试在按钮上添加动画。从左到右的褪色 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/

我该如何解决这个问题？

Answer 1

添加:

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

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