picnic
Version:
A lighweight CSS library with nice defaults and many plugins to kickstart your projects
84 lines (64 loc) • 1.6 kB
Markdown
## Buttons
They can be of different colors and types:
```html
<button>Button</button>
<button class='success'>Success</button>
<button class='warning'>Warning</button>
<button class='error'>Error</button>
<button disabled>Disabled</button>
```
```html
<button>Button</button>
<a class="button">Link</a>
<input value="Submit" type="submit">
<label>
<input type="checkbox">
<span class="toggle button">Toggle</span>
</label>
```
### Pseudo buttons
Allows for seemingly links to behave as buttons:
```html
<button class="pseudo">Button</button>
<a class="pseudo button">Link</a>
<input class="pseudo" value="Submit" type="submit">
<label>
<input type="checkbox">
<span class="toggle pseudo button">Toggle</span>
</label>
```
### Hack it
You only have to define a single color base for new colors. The `:hover` and `:active` status are handled as overlays for consistency and simplicity
```html
<button class="myCoolButton">My Cool Button</button>
```
```css
.myCoolButton {
background: #85144b;
}
```
To create a larger button you only need to make the font inside it larger. The paddings are set in *em* so the whole button stays in great shape:
```html
<button class="mainButton">Large button</button><br>
<button>Normal button</button><br>
<button class="shyButton">Small button</button>
```
```css
.mainButton {
font-size: 1.5em;
}
.shyButton {
font-size: .75em;
}
```
To change the color of the pseudo-color on hover:
```html
<button class="pseudo cool">Pseudo personal</button>
```
```css
.cool:hover,
.cool:active,
.cool:focus {
background: #cff;
}
```