グローボタンonfocus

Question

タブキーで選択すると、ボタンにグロー効果があります。誰でも私にこれを手伝うことができます。コードスニペットは非常に役立ちます。

おかげで のRashmi

Answer 1

あなたは最近のブラウザのために開発している場合は、HTML5のボックスシャドウと遷移使用することができます。

button{ 
background:#000; 
color:#fff; 
border:none; 
transition:box-shadow .3s linear; 
-moz-transition:-moz-box-shadow .3s linear; 
-webkit-transition:-webkit-box-shadow .3s linear; 
} 
button:hover,button:focus{ 
box-shadow:0px 0px 15px #fff; 
-moz-box-shadow:0px 0px 15px #fff; 
-webkit-box-shadow:0px 0px 15px #fff; 
} 

デモ：このため http://www.jsfiddle.net/ybHUy/

Answer 2

ないすべてのブラウザがHTML5アニメーションをサポートしていますが、http://colorpowered.com/blend/を見ている可能性があります。

Answer 3

jQueryのは、それが可能のために：

$(document).ready(function() { 
    $('#yourButtonId') 
     .focus(function() { 
      $(this).addClass('yourGlowClass'); 
     }) 
     .blur(function() { 
      $(this).removeClass('yourGlowClass'); 
     }); 
}); 

はJQueryのデモ：http://www.jsfiddle.net/S2H2R/3/を。

私はCSSフィルタについて100％確信していませんが、tutorial on the CSS Filter, including glowがあります。これは、クラスがCSSファイルに保存するのに便利です。

Answer 4

あなたは必要ありませんjQueryのを。

#yourButtonId:focus { 
    -moz-box-shadow: 5px 5px 5px #fff; 
    -webkit-box-shadow: 5px 5px 5px #fff; 
    box-shadow: 5px 5px 5px #fff; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)"; 
    filter: progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5); 
} 

IE9は、ボックスシャドウをサポートしているとき、それは、フィルタフォールバックを使用しないように、私は本当のサイト上での条件付きコメントでMSIE同等物を置くところに注意してください。

Answer 5

これはいかがですか？ YUI http://developer.yahoo.com/yui/examples/button/btn_example13.html