按钮背景颜色不起作用

我想使用我创建的这些波纹按钮，但是当我做一个<a href>标记时，按钮的背景颜色会改变。我碰巧认为它在CSS中，但我无法确定。我关掉了文字装饰，所以下划线不会显示，但就是这样。按钮背景颜色不起作用

var addRippleEffect = function(e) { 
 
    var target = e.target; 
 
    if (target.tagName.toLowerCase() !== 'button') return false; 
 
    var rect = target.getBoundingClientRect(); 
 
    var ripple = target.querySelector('.ripple'); 
 
    if (!ripple) { 
 
    ripple = document.createElement('span'); 
 
    ripple.className = 'ripple'; 
 
    ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; 
 
    target.appendChild(ripple); 
 
    } 
 
    ripple.classList.remove('show'); 
 
    var top = e.pageY - rect.top - ripple.offsetHeight/2 - document.body.scrollTop; 
 
    var left = e.pageX - rect.left - ripple.offsetWidth/2 - document.body.scrollLeft; 
 
    ripple.style.top = top + 'px'; 
 
    ripple.style.left = left + 'px'; 
 
    ripple.classList.add('show'); 
 
    return false; 
 
} 
 

 
document.addEventListener('click', addRippleEffect, false);

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrap { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
h1 { 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 0; 
 
    align-items: center; 
 
    flex: 2; 
 
    font-family: 'Open Sans'; 
 
} 
 
#main { 
 
    flex: 5; 
 
} 
 
button { 
 
    position: relative; 
 
    display: block; 
 
    width: 13em; 
 
    height: 3em; 
 
    margin: 2em; 
 
    border: none; 
 
    outline: none; 
 
    letter-spacing: .2em; 
 
    font-weight: bold; 
 
    background: #dfdfdf; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
    user-select: none; 
 
    border-radius: 2px; 
 
    font-family: 'Open Sans'; 
 
} 
 
button:nth-child(2) { 
 
    color: #fff; 
 
    background: #4285f4; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
button:nth-child(2):hover { 
 
    background: #6ea2f7; 
 
} 
 
button:nth-child(3) { 
 
    color: #fff; 
 
    background: #00bad2; 
 
} 
 
button:nth-child(4) { 
 
    color: #fff; 
 
    background: #ff8a80; 
 
} 
 
.ripple { 
 
    position: absolute; 
 
    background: rgba(0, 0, 0, .15); 
 
    border-radius: 100%; 
 
    transform: scale(0); 
 
    pointer-events: none; 
 
} 
 
.ripple.show { 
 
    animation: ripple .75s ease-out; 
 
} 
 
@keyframes ripple { 
 
    to { 
 
    transform: scale(2); 
 
    opacity: 0; 
 
    } 
 
} 
 
a { 
 
    text-decoration: none; 
 
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'> 
 
<div id="wrap"> 
 
    <h1>Ripple Effect</h1> 
 
    <div id="main"> 
 
    <button>BUTTON</button> 
 
    <a href="http://www.google.com"> 
 
     <button>BUTTON</button> 
 
    </a> 
 
    <button>BUTTON</button> 
 
    <button>BUTTON</button> 
 
    </div> 
 
</div>

来源

2015-11-20 user5544792

你可以澄清你在问什么吗？我不确定。谢谢 –

不要在'a'里面使用'button' http://www.w3.org/TR/html-markup/button.button.html#button.button-constraints –

它不工作的原因是button:nth-child(2)将一个按钮元素是其母公司的第二个孩子相匹配。

在你的情况下，你的按钮是而不是它的父母的第二个孩子，因为它的父母是<a>。

这样做：

<button> 
    <a href="http://google.com">BUTTON</a> 
</button>

看看它是如何工作的呢？

欲了解更多关于nth-child的信息，请登录nth-child MDN page。

来源

2015-11-20 02:01:56

按钮背景颜色不起作用

回答

相关问题