0

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

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

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

/*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按钮，我不知道有什么简单的方法可以解决这个问题。

你可以看看这个教程：Pressed Button State With CSS

于 2013-02-12T08:13:19.883 回答
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);
  }

演示

于 2013-02-12T08:35:39.903 回答