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

Вы можете просто установить высоту .common_button_container, добавив к ней height: 30px;.

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;