3D效果按鈕懸停狀態CSS（可能的錯誤？）

Question

只是想知道是否有任何人有解決問題的經驗，我已經使用按鈕的3D效果懸停狀態。

http://jsfiddle.net/andeh/b47xor6d/

.button{ 
cursor: pointer; 
display: block; 
line-height: 44px; 
height: 44px; 
width: 159px; 
background: #ff9600; 
border-radius: 5px; 
text-align: center; 
font-size: 18px; 
color: #fff; 
} 
.button:hover { 
display: block; 
min-height: 44px; 
min-width: 159px; 
background: #e68700; 
border-radius: 5px; 
text-align: center; 
font-size: 18px; 
border: 0 solid #fff; 
color: #fff; 
position: relative; 
top: -5px; 
bottom: auto; 
left: -5px; 
right: auto; 
cursor: pointer; 
background: #e68700; 
box-shadow: #c2c2c2 1px 1px, #c2c2c2 2px 2px, #c2c2c2 3px 3px, #c2c2c2 4px 4px, #c2c2c2 5px 5px; 
} 

正如你可以在我的例子中看到的，是什麼問題，就是當你將鼠標懸停在該按鈕時，如果你的光標上的影子，然後懸停狀態將停用。 據我所知，這是因爲我本質上將按鈕從光標移開，但我認爲創建的陰影可能會如何保留懸停狀態？

如果任何人知道任何修復將是偉大的！但在當下它只是一種刺激而已。

謝謝！

安迪

Answer 1

我有不同的方法，只需設置box-shadow爲inset，因此陰影將位於按鈕內部，並且在懸停在陰影上時不會鬆開懸停狀態。你

還需要懸停添加更具體border-radius所以它看起來像一個外部陰影..看到這個http://jsfiddle.net/b47xor6d/3/

.button:hover { 
    display: block; 
    min-height: 44px; 
    height:49px; 
    width: 164px; 
    min-width: 159px; 
    background: #e68700; 
    border-radius: 5px; 
    text-align: center; 
    font-size: 18px; 
    border: 0 solid #fff; 
    color: #fff; 
    position: relative; 
    border-top-right-radius: 10px; 
border-bottom-left-radius: 10px; 
    top: -5px; 
    bottom: auto; 
    left: -5px; 
    right: auto; 
    cursor: pointer; 
    background: #e68700; 
    box-shadow:inset #c2c2c2 -1px -1px,inset #c2c2c2 -2px -2px,inset #c2c2c2 -3px -3px,inset #c2c2c2 -4px -4px,inset #c2c2c2 -5px -5px; 
} 

Answer 2

.button{ 
 
    cursor: pointer; 
 
    display: block; 
 
    line-height: 44px; 
 
    height: 44px; 
 
    width: 159px; 
 
    background: #ff9600; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    transition: transform .3s ease,box-shadow .3s ease 
 
} 
 
.button:hover { 
 
    transform: translate3d(-5px,-5px,0); 
 
    box-shadow: #c2c2c2 1px 1px, #c2c2c2 2px 2px, #c2c2c2 3px 3px, #c2c2c2 4px 4px, #c2c2c2 5px 5px; 
 
}

<span class="button">button</span>

或者試試：speudo元素

.button{ 
 
    display: block; 
 
    position: relative; 
 
    height: 44px; 
 
    width: 159px; 
 
    color: transparent 
 
} 
 
.button:after{ 
 
    content: attr(data-text); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    line-height: 44px; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #ff9600; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    transition: transform .3s ease,box-shadow .3s ease 
 
} 
 
.button:hover:after { 
 
    transform: translate3d(-5px,-5px,0); 
 
    box-shadow: #c2c2c2 1px 1px, #c2c2c2 2px 2px, #c2c2c2 3px 3px, #c2c2c2 4px 4px, #c2c2c2 5px 5px; 
 
}

<span class="button" data-text=button>button</span>