0

私は2つのボタンを持っている1つのボタングループを持っています。ここで、1つのボタンを選択すると、そのボタンに影の効果があり、ボタンが押されていることを視聴者に示し、他のボタンは押されていないように見えるはずです。

4

3 に答える 3

2

とても簡単な方法です 

     .youButton:active{
        box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
        }
于 2013-02-12T08:12:38.983 に答える
1

これを試して。

 <div class="buttonSet">
         <a href="#" class="button">Button 1</a>
         <a href="#" class="button">Button 2</a>
 </div>

CSS

 .buttonSet { padding:20px;}
  a.button{ 
         padding:5px 10px; 
         border:solid 1px #cccccc; 
         background:#efefef;
         font-family:Arial, Helvetica, sans-serif; color:#333333;
         text-decoration:none;
 }
 a.button:active {
     color:#000000;
     -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
      box-shadow:0px 1px 2px rgba(0,0,0,0.3);
  }

DEMOM

于 2013-02-12T08:35:39.903 に答える
1

リンクを使用してボタンのスタイルを設定すると、これが可能になることを私は知っています。

/*HTML*/
<a href="#" class="button">Click Me</a>

/*CSS*/
a.button:active{
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}

アクティブセレクターは、リンクが押された状態のときにリンクのスタイルを変更します。しかし、実際のhtmlボタンの使用を検討している場合、それを修正する簡単な方法はわかりません。

このチュートリアルを見ることができます：CSSで押されたボタンの状態

于 2013-02-12T08:13:19.883 に答える