누름 단추를 만드는 방법은 무엇입니까?

Question

html로 버튼을 만들고 싶습니다. 클릭 할 때 안쪽으로 가야하고 다시 클릭하면 다시 올라와야합니다. 어떻게 CSS에서 그것을 할 수 있습니까?

감사

Answer 1

.

버튼의 상태를 유지하는 부울 변수 (예 : pressed 또는 released)를 업데이트하려면 Javascript를 사용해야하고 그에 따라 요소의 css 클래스를 변경해야합니다.

예를 들어 jQuery UI demo 또는 How do you create a toggle button? 질문을 참조하십시오.

Answer 2

첫째, 당신의 스타일 요소로 작용하는 요소 생성 : ARVE Systad 설명처럼

<span class="toggle">Click!</span> 

지금 당신이이 요소 스타일을 지정할 수 있습니다 : 마지막으로

.toggle { 
    padding: 5px; 
    background: #DDD; 
    border-top: 2px solid #CCC; 
    border-left: 2px solid #CCC; 
    border-right: 2px solid #555; 
    border-bottom: 2px solid #555; 
} 

.toggle.down { 
    border-top: 2px solid #555; 
    border-left: 2px solid #555; 
    border-right: 2px solid #CCC; 
    border-bottom: 2px solid #CCC; 
} 

를 추가 토글 기능, 자바 스크립트 사용 (또는 내 예 : jQuery) :

$(".toggle").click(function(){ 
    $(this).toggleClass("down"); 
}); 

자바 스크립트를 사용하는 것이 문제가되면 다른 해결책을 찾아야합니다. 확인란을 사용할 수 있습니다. 이 요소는 체크 된 상태와 체크되지 않은 상태를가집니다. 그러나 모든 브라우저에서 같은 방식으로 체크 상자의 스타일을 지정할 수는 없습니다. 나는 IE에서 개별 상태를 스타일링 할 수 있는지 여부조차 모른다.

Answer 3

"버튼"과 같은 클래스를 지정하고 활성화 :에서 테두리를 "반전"하십시오. 예 :

.button { 
    padding: 5px; 
    background: #DDD; 
    border-top: 2px solid #CCC; 
    border-left: 2px solid #CCC; 
    border-right: 2px solid #555; 
    border-bottom: 2px solid #555; 
} 

.button:active { 
    border-top: 2px solid #555; 
    border-left: 2px solid #555; 
    border-right: 2px solid #CCC; 
    border-bottom: 2px solid #CCC; 
} 

은 다음과 같습니다 : 당신은 CSS를 사용하여 단독으로 달성 할 수 http://jsfiddle.net/8wfw3/

Answer 4

위쪽과 왼쪽에는 흰색 테두리를, 아래쪽과 오른쪽에는 검은 색 테두리를 설정할 수 있습니다. 버튼을 누르기 만하면됩니다. 충분하지 않으면 이미지를 사용할 수 있습니다.

button { 
     border-width: 1px; 
     border-color: white black black white; 
     border-style: solid; 
} 
button:active { 
     border-color: black white white black; 
}

Answer 5

나는 HTML 단추로 할 수 있다고 생각하지 않습니다. 그것은 '위로'와 '아래'상태가 없습니다.

두 가지 상태 (체크 박스 유형의 HTML 입력 태그)를 사용하려면 체크 박스를 사용해야한다고 생각합니다. 그런 다음 체크 표시 여부에 따라 JavaScript를 사용하여 두 개의 다른 이미지를 표시 할 수 있습니다.

Answer 6

발전기를 사용해 보시지 않겠습니까? 이 같은 http://css-button-generator.com/

코드 샘플 ...

<style type="text/css"> 
.css_btn_class { 
    font-size:20px; 
    font-family:Arial; 
    font-weight:normal; 
    -moz-border-radius:8px; 
    -webkit-border-radius:8px; 
    border-radius:8px; 
    border:1px solid #ffaa22; 
    padding:16px 38px; 
    text-decoration:none; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(5%, #ffec64), color-stop(100%, #ffab23)); 
    background:-moz-linear-gradient(center top, #ffec64 5%, #ffab23 100%); 
    background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23'); 
    background-color:#ffec64; 
    color:#333333; 
    display:inline-block; 
    text-shadow:1px 1px 0px #ffee66; 
    -webkit-box-shadow:inset 1px 1px 0px 0px #fff6af; 
    -moz-box-shadow:inset 1px 1px 0px 0px #fff6af; 
    box-shadow:inset 1px 1px 0px 0px #fff6af; 
}.css_btn_class:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64)); 
    background:-moz-linear-gradient(center top, #ffab23 5%, #ffec64 100%); 
    background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64'); 
    background-color:#ffab23; 
}.css_btn_class:active { 
    position:relative; 
    top:1px; 
} 
/* This css button was generated by css-button-generator.com */ 
</style>