カーソルを合わせると浮き上がるようなボタンを作りたいです。私は現在、ボックスシャドウを使用して、上げられたボタンの視覚的な外観を作成しています。残念ながら、おそらく予想されるように、シャドウはホバーイベントをキャプチャしないため、ボタンを下から近づけるとボタンが乱暴に動作します。
これが私の少ないコードです:
.button-new {
background-color: lighten(@gray, 10%);
padding: 10px 20px;
.border-radius(8px);
color: white !important;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
@shadow: 0 4px 0 rgb(183,183,183);
.box-shadow(@shadow);
position: relative;
&:hover {
top: -8px;
@shadow: 0 4px 0 rgb(183,183,183), 0 12px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
}
&:active {
top: 0;
@shadow: 0 4px 0 rgb(183,183,183);
.box-shadow(@shadow);
}
}
cssボックスの影の上でホバーイベントをキャプチャする方法はありますか?または、必要なボタンクラスをコーディングするためのより良い方法はありますか?