Raphaël Numbus
22 lines
846 B
Markdown
22 lines
846 B
Markdown
# Buttons
|
|
|
|
1. Button with :
|
|
- an offset ring on focus
|
|
- a small shadow
|
|
- a nice transition
|
|
- a disabled feature
|
|
|
|
```html
|
|
px-10 py-3 bg-fuchsia-600 rounded-xl font-bold shadow-lg shadow-fuchsia-600/30 transition duration-200 hover:bg-fuchsia-500 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 focus:ring-offset-slate-700 disabled:opacity-50 disabled:cursor-not-allowed
|
|
```
|
|
|
|
2. Button with :
|
|
- a grow transformation on hover
|
|
- a gradient
|
|
- a small shadow
|
|
- a nice transition
|
|
- a disabled feature
|
|
|
|
```html
|
|
px-10 py-3 text-white font-bold rounded-xl scale-100 transition duration-200 ease-in bg-gradient-to-r from-fuchsia-500 via-fuchsia-600 to-fuchsia-700 hover:scale-105 hover:bg-gradient-to-br shadow-lg shadow-fuchsia-500/30 dark:shadow-lg dark:shadow-fuchsia-800/80 disabled:opacity-50 disabled:cursor-not-allowed
|
|
``` |