CSS를 사용하는 푸시 블 버튼

Question

살짝 움직이는 푸시 버튼을 만들려고합니다.

내 목표는 다음과 같이 버튼을 달성하는 것입니다 : 정확히 하나 개의 HTML 태그와 새로운 CSS 기능의 최소한의 양을 사용에

see the source code (jsfiddle)

변환 및 전환 좋아합니다.

그러나 jsfiddle에서 볼 수 있습니다. 적어도 두 번 버튼을 클릭하면 전체 라인 (및 그 아래의 컨텐츠)도 바운스됩니다. :active 선택자 안에 설정된 여백으로 인해 물론입니다.

내 두 번째 접근 방식은 CSS 변환 속성을 사용하고있었습니다. 단추의 높이를 변경해야하는 경우를 제외하고는 완벽하게 작동했습니다 (동일한 문제가 발생합니다).

내 질문은입니다. 다른 요소의 위치를 ​​조정하지 않고 어떻게 동일한 효과를 얻을 수 있습니까?

Answer 1

다른 요소의 위치를 ​​조정하지 않고 어떻게 동일한 효과를 얻을 수 있습니까?

button { 
    /* Other styles... */ 
    position: relative; /* position the element as relative */ 
    outline: none;  /* Just added for the demo   */ 
} 

button:active { 
    top: 2px; /* move the element without affecting the others' position */ 
    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, .1); 
} 

JSFiddle Demo 다음과 같이 나는 버튼 position: relative;을 사용하는 것이 좋습니다

후, :active 의사 클래스 top: 2px을 설정합니다.

당신은 기존의 IE 브라우저에 대한 transform: translate 재산 top/left 이상의 속성 (당신은 이유를 알고있는 경우 here 확인) 물론 당신은 상관하지 않을 경우 사용할 수 있습니다

Answer 2

:

button { 
    .... 
    transition: all .1s ease-in-out; 
    -moz-transition: all .1s ease-in-out; 
    -webkit-transition: all .1s ease-in-out; 
    .... 
} 

button:active { 
    transform: translatey(2px); 
    -moz-transform: translatey(2px); 
    -webkit-transform: translatey(2px); 
    ... 
} 

Demo

는