CSS按钮效果

Question

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

我想创建按钮按下的效果。但我不希望这种效应影响它的容器。我想只有按下按钮时宽度和高度减少，但不是容器。任何想法？

Answer 1

您可以通过将height: 30px;添加到它来设置.common_button_container的高度。

Answer 2

如果未指定容器的大小，使用：

.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是在原单后面，它设置了容器的大小，但common_button对它没有进一步的影响。

只是为了造型，关于使用transition如何：

-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out;