3D效果按钮悬停状态CSS（可能是bug？）

Question

只是想知道是否有人有解决我使用按钮的 3D 效果悬停状态的问题的经验。

.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

.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-elements

.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>

Answer 2

我有一个不同的方法，只需将 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;
}

3D效果按钮悬停状态CSS（可能是bug？）

3D effect button hover state CSS (Possible bug?)

css

button

3d

hover

mouseover