Question

我有一个按钮组，其中有两个按钮。现在当我选择一个按钮时，按钮应该有一些阴影效果，这将显示观众按下按钮，其他按钮应该被视为未按下。

Answer 1

这是非常简单的方法

     .youButton:active{
        box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
        }

Answer 2

我知道如果您使用链接设置按钮样式，这是可能的：

/*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;
}

Active 选择器会在链接处于按下状态时更改链接的样式。但是如果你想使用真正的html Buttons ，我不知道一个简单的方法来解决这个问题。

您可以查看本教程：Pressed Button State With CSS

Answer 3

试试这个。

 <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

阴影效果对每个按钮组的按钮

3 个答案: