注目新着
ボタンGradient Glow Button
A call-to-action button with a gradient fill and a soft coloured glow on hover.
#gradient#glow#hover
6 個のフレームワーク初級
Loading…
A bordered button with a transparent fill that floods with colour on hover.
<button class="outline-btn" type="button">
Learn more
</button>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
children必須 | ReactNode | - | コンポーネントの内部にレンダリングされるコンテンツ。 |
disabled | boolean | false | 操作を無効にし、コントロールを淡色表示にします。 |
onClick | () => void | - | ユーザーがコントロールを実行したときに発火します。 |
The whole component is one hue used three ways - `border-blue-600`, `text-blue-700`, and the `hover:bg-blue-600` fill. Change all three together or the hover state will not match the border it grew out of. The dark variants are a shade lighter on purpose: a transparent button inherits the page background, so the resting label has to be re-tuned to hold 4.5:1 where a filled button would not.