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>