미디어위키 UI 버튼 CSS

Jmnote bot (토론 | 기여)님의 2020년 11월 2일 (월) 02:59 판 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)

1 개요[ | ]

MediaWiki Button Style
Agora specs Buttons
미디어위키 버튼 CSS
미디어위키 버튼 스타일
클래스 색상 사용예시
.mw-ui-button
#ffffff
.mw-ui-destructive
#d11d13
.mw-ui-constructive
#00af89
로그인
.mw-ui-progressive
.mw-ui-primary
#347bff
회원가입

 

2 구현 예시[ | ]

<style>
    .mw-ui-button {
        font-family: inherit;
        font-size: 1em;
        display: inline-block;
        padding: .5em 1em;
        margin: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        *display: inline;
        zoom: 1;
        background: #FFF;
        color: #555;
        border: 1px solid #CCC;
        border-radius: 2px;
        min-width: 4em;
        vertical-align: middle;
        text-align: center;
        font-weight: 700;
        cursor: pointer;
        -webkit-transition: background .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
        -moz-transition: background .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
        -o-transition: background .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
        transition: background .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out
    }
    
    .mw-ui-button:hover,
    .mw-ui-button:focus {
        box-shadow: 0 1px rgba(0, 0, 0, .1), inset 0 -3px rgba(0, 0, 0, .2);
        border-bottom-color: #ccc;
        outline: 0
    }
    
    .mw-ui-button:hover::-moz-focus-inner,
    .mw-ui-button:focus::-moz-focus-inner {
        border-color: transparent
    }
    
    .mw-ui-button:active,
    .mw-ui-button.mw-ui-checked {
        background: #ccc;
        box-shadow: none
    }
    
    .mw-ui-button:hover,
    .mw-ui-button:active,
    .mw-ui-button:visited {
        color: #555
    }
    
    .mw-ui-button:disabled {
        color: #CCC
    }
    
    .mw-ui-button:disabled:hover,
    .mw-ui-button:disabled:active {
        background: #FFF;
        box-shadow: none
    }
    
    .mw-ui-button:disabled {
        text-shadow: none;
        cursor: default
    }
    
    .mw-ui-button.mw-ui-block {
        display: block;
        width: 100%
    }
    
    .mw-ui-button.mw-ui-progressive,
    .mw-ui-button.mw-ui-primary {
        background: #347bff;
        color: #fff;
        border: 1px solid #347bff;
        text-shadow: 0 1px rgba(0, 0, 0, .1)
    }
    
    .mw-ui-button.mw-ui-progressive:hover,
    .mw-ui-button.mw-ui-progressive:focus,
    .mw-ui-button.mw-ui-primary:hover,
    .mw-ui-button.mw-ui-primary:focus {
        box-shadow: 0 1px rgba(0, 0, 0, .1), inset 0 -3px rgba(0, 0, 0, .2);
        border-bottom-color: #2a62cc;
        outline: 0
    }
    
    .mw-ui-button.mw-ui-progressive:hover::-moz-focus-inner,
    .mw-ui-button.mw-ui-progressive:focus::-moz-focus-inner,
    .mw-ui-button.mw-ui-primary:hover::-moz-focus-inner,
    .mw-ui-button.mw-ui-primary:focus::-moz-focus-inner {
        border-color: transparent
    }
    
    .mw-ui-button.mw-ui-progressive:active,
    .mw-ui-button.mw-ui-progressive.mw-ui-checked,
    .mw-ui-button.mw-ui-primary:active,
    .mw-ui-button.mw-ui-primary.mw-ui-checked {
        background: #2a62cc;
        box-shadow: none
    }
    
    .mw-ui-button.mw-ui-progressive:disabled,
    .mw-ui-button.mw-ui-primary:disabled {
        background: #DDD;
        border-color: #DDD
    }
    
    .mw-ui-button.mw-ui-progressive:disabled:hover,
    .mw-ui-button.mw-ui-progressive:disabled:active,
    .mw-ui-button.mw-ui-progressive:disabled.mw-ui-checked,
    .mw-ui-button.mw-ui-primary:disabled:hover,
    .mw-ui-button.mw-ui-primary:disabled:active,
    .mw-ui-button.mw-ui-primary:disabled.mw-ui-checked {
        box-shadow: none
    }

    .mw-ui-button.mw-ui-constructive {
        background: #00af89;
        color: #fff;
        border: 1px solid #00af89;
        text-shadow: 0 1px rgba(0, 0, 0, .1)
    }
    
    .mw-ui-button.mw-ui-constructive:hover,
    .mw-ui-button.mw-ui-constructive:focus {
        box-shadow: 0 1px rgba(0, 0, 0, .1), inset 0 -3px rgba(0, 0, 0, .2);
        border-bottom-color: #008c6e;
        outline: 0
    }
    
    .mw-ui-button.mw-ui-constructive:hover::-moz-focus-inner,
    .mw-ui-button.mw-ui-constructive:focus::-moz-focus-inner {
        border-color: transparent
    }
    
    .mw-ui-button.mw-ui-constructive:active,
    .mw-ui-button.mw-ui-constructive.mw-ui-checked {
        background: #008c6e;
        box-shadow: none
    }
    
    .mw-ui-button.mw-ui-constructive:disabled {
        background: #DDD;
        border-color: #DDD
    }
    
    .mw-ui-button.mw-ui-constructive:disabled:hover,
    .mw-ui-button.mw-ui-constructive:disabled:active,
    .mw-ui-button.mw-ui-constructive:disabled.mw-ui-checked {
        box-shadow: none
    }
    
    .mw-ui-button.mw-ui-destructive {
        background: #d11d13;
        color: #fff;
        border: 1px solid #d11d13;
        text-shadow: 0 1px rgba(0, 0, 0, .1)
    }
    
    .mw-ui-button.mw-ui-destructive:hover,
    .mw-ui-button.mw-ui-destructive:focus {
        box-shadow: 0 1px rgba(0, 0, 0, .1), inset 0 -3px rgba(0, 0, 0, .2);
        border-bottom-color: #a7170f;
        outline: 0
    }
    
    .mw-ui-button.mw-ui-destructive:hover::-moz-focus-inner,
    .mw-ui-button.mw-ui-destructive:focus::-moz-focus-inner {
        border-color: transparent
    }
    
    .mw-ui-button.mw-ui-destructive:active,
    .mw-ui-button.mw-ui-destructive.mw-ui-checked {
        background: #a7170f;
        box-shadow: none
    }
    
    .mw-ui-button.mw-ui-destructive:disabled {
        background: #DDD;
        border-color: #DDD
    }
    
    .mw-ui-button.mw-ui-destructive:disabled:hover,
    .mw-ui-button.mw-ui-destructive:disabled:active,
    .mw-ui-button.mw-ui-destructive:disabled.mw-ui-checked {
        box-shadow: none
    }
    
    a.mw-ui-button {
        text-decoration: none
    }
    
    a.mw-ui-button:hover,
    a.mw-ui-button:focus {
        text-decoration: none
    }

</style>

<input class="mw-ui-button" type="button" value="그냥 버튼">
<input class="mw-ui-button mw-ui-destructive" type="button" value="빨간 버튼">
<input class="mw-ui-button mw-ui-constructive" type="button" value="녹색 버튼">
<input class="mw-ui-button mw-ui-progressive" type="button" value="파란 버튼">

<br>
<br>

<input class="mw-ui-button" type="button" value="그냥 버튼" disabled>
<input class="mw-ui-button mw-ui-destructive" type="button" value="빨간 버튼" disabled>
<input class="mw-ui-button mw-ui-constructive" type="button" value="녹색 버튼" disabled>
<input class="mw-ui-button mw-ui-progressive" type="button" value="파란 버튼" disabled>

3 같이 보기[ | ]

4 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}