# Оформление кнопок на просмотр/скачивание документов

<table id="bkmrk-basic-%3Ca-class%3D%22my-b"><tbody><tr><td><a class="my-btn" type="button">Basic</a></td><td>```html
<a class="my-btn" href="#" target="_blank">Basic</a>
```

</td></tr><tr><td><a class="my-btn focus" type="button">Basic</a></td><td> ```html
<a class="my-btn focus" href="#" target="_blank">Basic focus</a>
```

</td></tr><tr><td><a class="my-btn active" type="button">Basic active</a></td><td> ```html
<a class="my-btn active" href="#" target="_blank">Basic active</a>
```

</td></tr><tr><td><a class="my-btn disabled" type="button">Basic disabled</a></td><td> ```html
<a class="my-btn disabled" href="#" target="_blank">Basic disabled</a>
```

</td></tr><tr><td><a class="my-btn success" type="button">Success</a></td><td> ```html
<a class="my-btn success" href="#" target="_blank">Success</a>
```

</td></tr><tr><td><a class="my-btn success focus" type="button">Success focus</a></td><td> ```html
<a class="my-btn success focus" href="#" target="_blank">Success focus</a>
```

</td></tr><tr><td><a class="my-btn success active" type="button">Success active</a></td><td> ```html
<a class="my-btn success active" href="#" target="_blank">Success active</a>
```

</td></tr><tr><td><a class="my-btn success disabled" type="button">Success disabled</a></td><td> ```html
<a class="my-btn success disabled" href="#" target="_blank">Success disabled</a>
```

</td></tr><tr><td><a class="my-btn info" type="button">Info</a></td><td> ```html
<a class="my-btn info" href="#" target="_blank">Info</a>
```

</td></tr><tr><td><a class="my-btn info focus" type="button">Info focus</a></td><td> ```html
<a class="my-btn info focus" href="#" target="_blank">Info focus</a>
```

</td></tr><tr><td><a class="my-btn info active" type="button">Info active</a></td><td> ```html
<a class="my-btn info active" href="#" target="_blank">Info active</a>
```

</td></tr><tr><td><a class="my-btn info disabled" type="button">Info disabled</a></td><td> ```html
<a class="my-btn info disabled" href="#" target="_blank">Info disabled</a>
```

</td></tr><tr><td><a class="my-btn warning" type="button">Warning</a></td><td> ```html
<a class="my-btn warning" href="#" target="_blank">Warning</a>
```

</td></tr><tr><td><a class="my-btn warning focus" type="button">Warning focus</a></td><td> ```html
<a class="my-btn warning focus" href="#" target="_blank">Warning focus</a>
```

</td></tr><tr><td><a class="my-btn warning active" type="button">Warning active</a></td><td> ```html
<a class="my-btn warning active" href="#" target="_blank">Warning active</a>
```

</td></tr><tr><td><a class="my-btn warning disabled" type="button">Warning disabled</a></td><td> ```html
<a class="my-btn warning disabled" href="#" target="_blank">Warning disabled</a>
```

</td></tr><tr><td><a class="my-btn danger" type="button">Danger</a></td><td> ```html
<a class="my-btn danger" href="#" target="_blank">Danger</a>
```

</td></tr><tr><td><a class="my-btn danger focus" type="button">Danger focus</a></td><td> ```html
<a class="my-btn danger focus" href="#" target="_blank">Danger focus</a>
```

</td></tr><tr><td><a class="my-btn danger active" type="button">Danger active</a></td><td> ```html
<a class="my-btn danger active" href="#" target="_blank">Danger active</a>
```

</td></tr><tr><td><a class="my-btn danger disabled" type="button">Danger disabled</a></td><td> ```html
<a class="my-btn danger disabled" href="#" target="_blank">Danger disabled</a>
```

</td></tr></tbody></table>

**CSS Код:**

```css
/* Оформление кнопок с классом my-btn */
.my-btn {
  display: inline-block;
  margin: .5em;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  padding: 10px 16px;
  line-height: 1.3333333;
  border-radius: 4px;
  border: 1px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--text-color);
  background-color: var(--primary-color-light);
  border-color: var(--border-color-light);
  &:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
  &:focus,
  &.focus {
    color: var(--primary-color);
    border-color: var(--primary-color);
    outline-offset: -2px;
  }
  &:active,
  &.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px var(--text-color-gray);
    box-shadow: inset 0 3px 5px var(--text-color-gray);
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
  &:active:hover,
  &.active:hover,
  &:active:focus,
  &.active:focus,
  &:active.focus,
  &.active.focus {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
  &.success {
    --color: #fff;
    --bg: #198754;
    --border-color: #198754;
    --hover-color: #fff;
    --hover-bg: #157347;
    --hover-border-color: #146c43;
    --focus-shadow-rgb: 60, 153, 110;
    --active-color: #fff;
    --active-bg: #146c43;
    --active-border-color: #13653f;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #fff;
    --disabled-bg: #198754;
    --disabled-border-color: #198754;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
  &.info {
    --color: #000;
    --bg: #0dcaf0;
    --border-color: #0dcaf0;
    --hover-color: #000;
    --hover-bg: #31d2f2;
    --hover-border-color: #25cff2;
    --focus-shadow-rgb: 11, 172, 204;
    --active-color: #000;
    --active-bg: #3dd5f3;
    --active-border-color: #25cff2;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #000;
    --disabled-bg: #0dcaf0;
    --disabled-border-color: #0dcaf0;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
  &.warning {
    --color: #000;
    --bg: #ffc107;
    --border-color: #ffc107;
    --hover-color: #000;
    --hover-bg: #ffca2c;
    --hover-border-color: #ffc720;
    --focus-shadow-rgb: 217, 164, 6;
    --active-color: #000;
    --active-bg: #ffcd39;
    --active-border-color: #ffc720;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #000;
    --disabled-bg: #ffc107;
    --disabled-border-color: #ffc107;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
  &.danger {
    --color: #fff;
    --bg: #dc3545;
    --border-color: #dc3545;
    --hover-color: #fff;
    --hover-bg: #bb2d3b;
    --hover-border-color: #b02a37;
    --focus-shadow-rgb: 225, 83, 97;
    --active-color: #fff;
    --active-bg: #b02a37;
    --active-border-color: #a52834;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #fff;
    --disabled-bg: #dc3545;
    --disabled-border-color: #dc3545;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
}
.my-btn.disabled,
.my-btn[disabled],
fieldset[disabled] .my-btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.my-btn.disabled:hover,
.my-btn[disabled]:hover,
fieldset[disabled] .my-btn:hover,
.my-btn.disabled:focus,
.my-btn[disabled]:focus,
fieldset[disabled] .my-btn:focus,
.my-btn.disabled.focus,
.my-btn[disabled].focus,
fieldset[disabled] .my-btn.focus {
  background-color: var(--primary-color-light);
  border-color: var(--border-color-light);
}
a.my-btn.disabled,
fieldset[disabled] a.my-btn {
  pointer-events: none;
}
a.my-btn {
  text-decoration: none;
}
```

<p class="callout info">Как внедрить код css на наш сайт описывается в [**следующей статье**](https://book.mylbt.ru/books/eps/page/vstuplenie "Вступление").</p>