openproject/app/assets/stylesheets/content/_buttons.md

# Buttons

## Default buttons

```
<button class="***button***"><i class="icon-buttons icon-watch-1"></i>Watch</button>
<button class="***button***"><i class="icon-buttons icon-watch-1"></i></button>
<button class="***button***">Watch</button>
<button class="***button***" disabled>
  <i class="icon-buttons icon-watch-1"></i>Watch
</button>
<br>

<a href="#" class="***button*** icon-context icon-watch-1">Watch</a>
<a href="#" class="***button***">Click to watch</a>

<input type="submit" class="***button***" value="Submit to watch"/>
<input type="submit" class="***button***" value="Do not watch" disabled />
```

## Highlight buttons

```
<button class="button ***-highlight***"><i class="icon-buttons icon-attention2"></i>Apply</button>
<button class="button ***-highlight***"><i class="icon-buttons icon-attention2"></i></button>
<button class="button ***-highlight***">Apply</button>
<button class="button ***-highlight***" disabled>
  <i class="icon-buttons icon-attention2"></i>Apply
</button>
<br>

<a href="#" class="button ***-highlight*** icon-context icon-attention2">Apply</a>
<a href="#" class="button ***-highlight***">Click to apply</a>

<input type="submit" class="button ***-highlight***" value="Submit to apply"/>
<input type="submit" class="button ***-highlight***" value="Do not apply" disabled />
```


## Success buttons

```
<button class="button ***-success***"><i class="icon-buttons icon-yes"></i>Save</button>
<button class="button ***-success***"><i class="icon-buttons icon-yes"></i></button>
<button class="button ***-success***">Save</button>
<button class="button ***-success***" disabled>
  <i class="icon-buttons icon-yes"></i>Save
</button>
<br>

<a href="#" class="button ***-success*** icon-context icon-yes">Save</a>
<a href="#" class="button ***-success***">Click to save</a>

<input type="submit" class="button ***-success***" value="Submit to save"/>
<input type="submit" class="button ***-success***" value="Do not save" disabled />
```


## Active (depressed) buttons

```
<button class="button ***-active***"><i class="icon-buttons icon-fire"></i>Connect</button>
<button class="button ***-active***"><i class="icon-buttons icon-fire"></i></button>
<button class="button ***-active***">Connect</button>
<button class="button ***-active***" disabled>
  <i class="icon-buttons icon-fire"></i>Connect
</button>
<br>

<a href="#" class="button ***-active*** icon-context icon-fire">Connect</a>
<a href="#" class="button ***-active***">Click to connect</a>

<input type="submit" class="button ***-active***" value="Submit to connect"/>
<input type="submit" class="button ***-active***" value="Do not connect" disabled />
```

## Transparent buttons

```
<button class="button ***-transparent***"><i class="icon-buttons icon-bubble3"></i>Comment</button>
<button class="button ***-transparent***"><i class="icon-buttons icon-bubble3"></i></button>
<button class="button ***-transparent***">Comment</button>
<button class="button ***-transparent***" disabled>
  <i class="icon-buttons icon-bubble3"></i>Comment
</button>
<br>

<a href="#" class="button ***-transparent*** icon-context icon-bubble3">Comment</a>
<a href="#" class="button ***-transparent***">Click to comment</a>

<input type="submit" class="button ***-transparent***" value="Submit to comment"/>
<input type="submit" class="button ***-transparent***" value="Do not comment" disabled />
```

## Button sizes

```
<button class="button ***-tiny***"><i class="icon-buttons icon-star1"></i>Tiny</button>
<button class="button ***-tiny***"><i class="icon-buttons icon-star1"></i></button>
<button class="button ***-tiny***">Tiny</button>
```

```
<button class="button ***-small***"><i class="icon-buttons icon-star1"></i>Small</button>
<button class="button ***-small***"><i class="icon-buttons icon-star1"></i></button>
<button class="button ***-small***">Small</button>
```

```
<button class="***button***"><i class="icon-buttons icon-star1"></i>Default</button>
<button class="***button***"><i class="icon-buttons icon-star1"></i></button>
<button class="***button***">Default</button>

```

```
<button class="button ***-large***"><i class="icon-buttons icon-star1"></i>Large</button>
<button class="button ***-large***"><i class="icon-buttons icon-star1"></i></button>
<button class="button ***-large***">Large</button>
```

## Expanded buttons

```
<button class="button ***-expand***">Expanded button</button>
<a href="#" class="button ***-expand***">Expanded button as link</a>
```

## Rounded buttons

```
<button class="button ***-round***">Rounded button</button>
<a href="#" class="button ***-round***">Rounded button as link</a>
```