확장 가능 버튼

Question

저는이 사이트 하단 (http://mastermechanic.ca/services.php)과 비슷한 확장형 버튼을 만들려고 시도했지만 문제를 파악하는 데 어려움이 있습니다. 저는 JavaScript의 초보자입니다. 그래서 어떤 도움을 주시면 감사하겠습니다.

Answer 1

HTML : <button id="lol">Some long text</button>

CSS : #lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px}

Answer 2

내가 당신이해야 할 수도 있습니다 CSS를 만든 JS Fiddle

#lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px; width: 50%;} 

Answer 3

예를 참조 ... 버튼의 폭을 정의하는 시도 아래 링크에 정확한 버튼이 있어야합니다. 나는 그것이 도움이되기를 바랍니다. 격려.

CSS :

.big { 
    background: #fb7303; 
    height: 100px; 
    width: 250px; 
    border: 5px solid #ffa500; 
    border-radius:10px; 
    color: white; 
    font-size: 20px; 
} 

HTML :

<button class="big">Schedule <br>Maintenance</button> 

바이올린 링크 : http://jsfiddle.net/dHq74/3/

Answer 4

나는 매우 상세한 예제를 작성하지 않은, 그러나 이것은 바른 길에 당신을 설정해야합니다. 여기에서 주변에서 놀 수 있습니다.

그들은 "버튼"이 클래스 "fullheight"를 추가하고 때 다시 클릭 사용자가 클릭, 그것은 클래스 "smallheight"

$("#reveal-container").toggleClass("smallheight"); 
$("#reveal-container").toggleClass("fullheight"); 

을 추가 JQuery와 & CSS를 조합하여 사용

I DIDNT 이렇게하십시오. 당신은 여전히 ​​내 예를 혜택을 누릴 수 있습니다 아마도 주문 :

을 jQuery를

$(".button").click(function() { 
     $button = $(this); 
     $content = $button.next(); 
     $content.slideToggle(500, function() { 
     }); 

    }); 

을

FIDDLE를 참조하십시오 : 나는 단지 그들이 다음 열려 슬라이드 jQuery를 사용했던 것처럼 컨테이너 DIV를 생성하고 폐쇄

전체 예를 보자.

희망이 도움이됩니다. :)