미디어위키 UI 버튼 CSS

1 개요

MediaWiki Button Style
미디어위키 버튼 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-size: 1em;
    padding: .5em 1em;
    background: #fff;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.1s ease-in-out, color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
  }
  
  .mw-ui-button:hover {
    background-color: #cccccc;
  }
  
  .mw-ui-button.mw-ui-destructive {
    background: #d11d13;
    color: #fff;
    border: 1px solid #d11d13;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
  }
  
  .mw-ui-button.mw-ui-destructive:hover {
    background-color: #a7170f;
  }
  
  .mw-ui-button.mw-ui-constructive {
    background: #00af89;
    color: #fff;
    border: 1px solid #00af89;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
  }
  
  .mw-ui-button.mw-ui-constructive:hover {
    background-color: #008c6d;
  }
  
  .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, 0.1);
  }
  
  .mw-ui-button.mw-ui-progressive:hover,
  .mw-ui-button.mw-ui-primary:hover {
    background-color: #2962cc;
  }
  
  .mw-ui-button:disabled,
  .mw-ui-button:disabled,
  .mw-ui-button:disabled:hover,
  .mw-ui-button:disabled:hover {
    background: #dddddd;
    border-color: #dddddd;
  }

</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 참고 자료

https://phabricator.wikimedia.org/diffusion/MW/browse/master/resources/src/mediawiki.ui/components/buttons.less