懸停並在鼠標懸停上顯示陰影的Web按鈕

Question

我想知道如何使用某些功能獲得一個按鈕（單擊該按鈕以簡單鏈接到另一個頁面）。

1）按鈕是圖像按鈕沒有文本

2）當在該按鈕在用戶將鼠標懸停，我想它順利動畫向上，所以它漂浮只是一個小（也許20像素？）以上它曾經是

3）當按鈕懸停時，它應該在其基線上投下一個小陰影。我的意思是一個陰影，而不是一個陰影邊界 - 陰影就像正午的太陽在上面，並在地面上投下一個向下的橢圓形陰影。

基本上，我期待有一個非常美觀的按鈕。一個JavaScript或jQuery解決方案將是完美的。

在此先感謝！ （我應該提到我已經爲此使用了Google，但是描述按鈕功能的最佳術語是「懸停」，並且我獲得了與鼠標「懸停」實現相關的所有結果，而不是實際的可見按鈕「懸停「）

Answer 1

這裏是使用css過渡和盒子sadhow的基本示例。您可以使用邊距和轉場向上對按鈕進行動畫處理。

HTML

<button></button> 

CSS

button { 
    display: block; 
    margin-top: 20px; 
    height: 40px; 
    width: 60px; 
    color black; 
    -webkit-transition: all 200ms linear; 
    -moz-transition: all 200ms linear; 
    transition: all 200ms linear; 
    border: none; 
    background-image: url('your image'); 
} 
button:hover { 
    margin-top: 0px; 
    -moz-box-shadow: 0px 0px 4px 1px grey; 
    -webkit-box-shadow: 0px 0px 4px 1px grey; 
    box-shadow: 0px 0px 4px 1px grey; 
} 

小提琴http://jsfiddle.net/caknopal/mmr4F/

爲JS，你可以使用jQuery動畫以動畫按鈕。

CSS

button.hover { 
    -moz-box-shadow: 0px 0px 4px 1px grey; 
    -webkit-box-shadow: 0px 0px 4px 1px grey; 
    box-shadow: 0px 0px 4px 1px grey; 
} 

JS

$('button').on('mouseover', function(){ 
    $(this).animate({'margin-top':0}, 200); 
    $(this).addClass('hover'); 
}); 
$('button').on('mouseout', function(){ 
    $(this).animate({'margin-top':20}, 200); 
    $(this).removeClass('hover'); 
}); 

小提琴http://jsfiddle.net/caknopal/mmr4F/3/