ant-design/components/button/demo/ghost.md

45 lines
787 B
Markdown
Raw Normal View History

---
order: 8
title:
zh-CN: 幽灵按钮
en-US: Ghost Button
---
## zh-CN
2018-08-22 16:17:33 +08:00
幽灵按钮将按钮的内容反色,背景变为透明,常用在有色背景上。
## en-US
`ghost` property will make button's background transparent, it is commonly used in colored background.
2019-05-07 14:57:32 +08:00
```jsx
import { Button } from 'antd';
ReactDOM.render(
2019-12-23 16:36:40 +08:00
<div className="site-button-ghost-wrapper">
2019-05-07 14:57:32 +08:00
<Button type="primary" ghost>
Primary
</Button>
2017-03-18 16:33:55 +08:00
<Button ghost>Default</Button>
2020-01-03 15:22:16 +08:00
<Button type="dashed" ghost>
Dashed
2019-11-22 12:02:35 +08:00
</Button>
<Button type="text" ghost>
Text
</Button>
2019-11-22 13:59:20 +08:00
<Button type="link" ghost>
Link
2019-11-22 13:59:20 +08:00
</Button>
2018-06-27 15:55:04 +08:00
</div>,
2019-05-07 14:57:32 +08:00
mountNode,
2018-11-28 15:00:03 +08:00
);
2019-05-07 14:57:32 +08:00
```
2019-12-23 16:36:40 +08:00
2019-12-23 17:16:26 +08:00
```css
.site-button-ghost-wrapper {
background: rgb(190, 200, 200);
padding: 26px 16px 16px;
}
```