mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-19 11:58:41 +08:00
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { AntDesignOutlined } from '@ant-design/icons';
|
|
import { Button, ConfigProvider, Space } from 'antd';
|
|
import { createStyles } from 'antd-style';
|
|
|
|
const useStyle = createStyles(({ prefixCls, css }) => ({
|
|
linearGradientButton: css`
|
|
&.${prefixCls}-btn-primary:not([disabled]):not(.${prefixCls}-btn-dangerous) {
|
|
border-width: 0;
|
|
|
|
> span {
|
|
position: relative;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
background: linear-gradient(135deg, #6253e1, #04befe);
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 1;
|
|
transition: all 0.3s;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
&:hover::before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`,
|
|
}));
|
|
|
|
const App: React.FC = () => {
|
|
const { styles } = useStyle();
|
|
|
|
return (
|
|
<ConfigProvider
|
|
button={{
|
|
className: styles.linearGradientButton,
|
|
}}
|
|
>
|
|
<Space>
|
|
<Button type="primary" size="large" icon={<AntDesignOutlined />}>
|
|
Gradient Button
|
|
</Button>
|
|
<Button size="large">Button</Button>
|
|
</Space>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|