버튼

기본 버튼

Pure 버튼을 만들려면, 아무 <a>나 <button> 엘리먼트에 pure-button 클래스이름을 추가한다.

Pure 버튼 Pure 버튼

<a class="pure-button" href="#">Pure 버튼</a>
<button class="pure-button">Pure 버튼</button>

비활성화된 버튼

버튼을 비활성화로 나타내려면, pure-button 클래스이름 옆에 pure-button-disabled를 추가한다. To mark a button as disabled, add the <code>pure-button-disabled</code> classname alongside <code>pure-button</code>.

비활성화된 버튼 비활성화된 버튼

<a class="pure-button pure-button-disabled" href="#">비활성화된 버튼</a>
<button class="pure-button pure-button-disabled">비활성화된 버튼</button>

활성화된 버튼

"눌렸음"을 버튼에 나타내려면, pure-button 클래스이름 옆에 pure-button-active를 추가한다. To style a button so that it appears "pressed", add the <code>pure-button-active</code> classname alongside <code>pure-button</code>.

활성화된 버튼 활성화된 버튼

<a class="pure-button pure-button-active" href="#">활성화된 버튼</a>
<button class="pure-button pure-button-active">활성화된 버튼</button>

우선순위 버튼

버튼을 1순위로 나타내고 싶으면, pure-button 클래스이름 옆에 pure-button-primary를 추가한다.

우선순위 버튼 우선순위 버튼

<a class="pure-button pure-button-primary" href="#">우선순위 버튼</a>
<button class="pure-button pure-button-primary">우선순위 버튼</button>

버튼 커스텀하기

Pure의 최소화된 스타일 덕분에, 기존 Pure 버튼에서 만들기도 쉽고 어플리케이션에 맞게 커스텀하기도 쉽다.

버튼 스타일을 커스텀하려면, pure-button 클래스이름을 갖는 엘리먼트에 pure-button-foo처럼 수정된 CSS를 묶은 클래스를 추가하면 된다. 예시를 보자.

둥근 모서리의 색깔 버튼들

<div>
    <style scoped>

        .pure-button-success,
        .pure-button-error,
        .pure-button-warning,
        .pure-button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .pure-button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .pure-button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .pure-button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .pure-button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }

    </style>

    <button class="pure-button pure-button-success">Success Button</button>
    <button class="pure-button pure-button-error">Error Button</button>
    <button class="pure-button pure-button-warning">Warning Button</button>
    <button class="pure-button pure-button-secondary">Secondary Button</button>
</div>

다른 크기들의 버튼들

<div>
    <style scoped>

        .pure-button-xsmall {
            font-size: 70%;
        }

        .pure-button-small {
            font-size: 85%;
        }

        .pure-button-large {
            font-size: 110%;
        }

        .pure-button-xlarge {
            font-size: 125%;
        }

    </style>

    <button class="pure-button pure-button-xsmall">Extra Small Button</button>
    <button class="pure-button pure-button-small">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="pure-button pure-button-large">Large Button</button>
    <button class="pure-button pure-button-xlarge">Extra Large Button</button>
</div>

아이콘을 넣은 버튼

Pure에는 아이콘 폰트가 포함되어있지 않지만, 다른 것들을 가져다쓰기에는 좋다. 아이콘 폰트들을 Pure 버튼에 넣는건 매우 쉽다. 아래 예시에서는 Font Awesome 아이콘폰트를 쓰고 있다. Font Awesome CSS file를 페이지에 넣고, pure-button 엘리먼트 안에 <i> 엘리먼트를 사용하면 된다.

설정 결제하기

<button class="pure-button">
    <i class="icon-cog"></i>
    설정
</button>

<a class="pure-button" href="#">
    <i class="icon-shopping-cart icon-large"></i>
    결제하기
</a>