CSS按钮效果

时间:2015-05-22 16:18:22

标签: html css

Demo

  .common_button:active
  {
    box-shadow: 0px 3px 3px -2px #777;
    padding: 3px;
    width:80px;
  }

  .common_button_container
  {
    border: 1px solid;
    width: 100px;
    padding: 7px;
  }

我正在尝试创建按钮效果。但我不希望这种影响影响它的容器。我希望按下时按钮上的宽度和高度仅减小,而不是容器。有什么想法吗?

2 个答案:

答案 0 :(得分:2)

您可以通过向.common_button_container添加height: 30px;来设置SELECT * FROM ( SELECT 'S640D14268424' AS Shipment UNION SELECT 'S640D14268924' UNION SELECT 'S640D14268925' UNION SELECT 'S646D14261190' UNION SELECT 'S646I14265886' UNION SELECT 'S640D14268423' UNION SELECT 'S646D14269951' UNION SELECT 'S646D14269939' UNION SELECT 'S646D14269034' UNION SELECT 'S646D14269962' UNION SELECT 'S646D14269953' UNION SELECT 'S646D14271620' UNION SELECT 'S646D14269030' UNION SELECT 'S646D14269941' UNION SELECT 'S646D14269251' UNION SELECT 'S646D14273089' UNION SELECT 'S646D14272388' UNION SELECT 'S646D14273197' UNION SELECT 'S646D14273399' UNION SELECT 'S640D14273543' UNION SELECT 'S640D14272952' UNION SELECT 'S640D14272953' UNION SELECT 'S640D14276996' UNION SELECT 'S640D14277005' UNION SELECT 'S640D14277006' UNION SELECT 'S646D148047394' UNION SELECT 'S640D14277004' UNION SELECT 'S646D158049311' UNION SELECT 'S646D158049791' UNION SELECT 'S646D158049797' UNION SELECT 'S646D158049806' UNION SELECT 'S646D158049781' UNION SELECT 'S646D158049557' UNION SELECT 'S646D158049064' UNION SELECT 'S646D158049561' UNION SELECT 'S646D158049794' UNION SELECT 'S646D158049362' UNION SELECT 'S646D158049361' UNION SELECT 'S646D158049792' UNION SELECT 'S646D158049808' UNION SELECT 'S646D158049788' UNION SELECT 'S646D158049365' UNION SELECT 'S646D158049800' UNION SELECT 'S646D158049790' UNION SELECT 'S646D158049799' UNION SELECT 'S646D158049803' UNION SELECT 'S646D158049784' UNION SELECT 'S646D158049522' UNION SELECT 'S646D158049340' UNION SELECT 'S646D158049796' UNION SELECT 'S646D158049687' UNION SELECT 'S646D158049491' UNION SELECT 'S646D158049499' UNION SELECT 'S646D158049484' UNION SELECT 'S646D158049486' UNION SELECT 'S646D158049494') numbers_to_look WHERE Shipment NOT IN (SELECT [shipment] FROM acknowledgement WHERE shipment>'' ) 的高度。

答案 1 :(得分:0)

如果未指定容器的大小,请使用:

$sql = "CREATE DATABASE " . $dbname;
.common_button_placeholder
  {
  background-color: transparent;
    color: transparent;
  }

.common_button
  {
  position: absolute;
  }

.common_button:active
  {
    box-shadow: 0px 3px 3px -2px #777;
    padding: 3px;
    width:80px;
  }

  .common_button_container
  {
    border: 1px solid;
    width: 100px;
    padding: 7px;
  }

<div class="common_button_container"> <div class="common_button">Submit</div> <div class="common_button_placeholder">Submit</div> </div>设置为common_button; absolute没有。因此common_button_placeholder位于原始版本后面,它设置了容器的大小,但common_button_placeholder对它没有进一步的影响。

仅仅为了样式,使用{{ 1}}:

common_button