123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- import * as React from 'react';
- import PropTypes from 'prop-types';
- import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
- import { styled } from '@mui/system';
- const ButtonRoot = React.forwardRef(function ButtonRoot(props, ref) {
- const { children, ...other } = props;
- return (
- <svg
- width="150"
- height="50"
- {...other}
- ref={ref}
- >
- <polygon
- points="0,50 0,0 150,0 150,50"
- className="bg"
- />
- <polygon
- points="0,50 0,0 150,0 150,50"
- className="borderEffect"
- />
- <foreignObject
- x="0" y="0"
- width="150"
- height="50"
- >
- <div
- className="content"
- >
- {children}
- </div>
- </foreignObject>
- </svg>
- );
- });
- ButtonRoot.propTypes = {
- children: PropTypes.node,
- };
- const CustomButtonRoot = styled(ButtonRoot)(
- ({ theme }) => `
- overflow: visible;
- cursor: pointer;
- --main-color: ${
- theme.palette.mode === 'light' ? 'rgb(25,118,210)' : 'rgb(144,202,249)'
- };
- --hover-color: ${
- theme.palette.mode === 'light'
- ? 'rgba(25,118,210,0.04)'
- : 'rgba(144,202,249,0.08)'
- };
- --active-color: ${
- theme.palette.mode === 'light'
- ? 'rgba(25,118,210,0.12)'
- : 'rgba(144,202,249,0.24)'
- };
- & polygon {
- fill: transparent;
- transition: all 800ms ease;
- pointer-events: none;
- }
-
- & .bg {
- stroke: var(--main-color);
- stroke-width: 0.5;
- filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
- fill: transparent;
- }
- & .borderEffect {
- stroke: var(--main-color);
- stroke-width: 2;
- stroke-dasharray: 150 600;
- stroke-dashoffset: 150;
- fill: transparent;
- }
- &:hover,
- &.${buttonUnstyledClasses.focusVisible} {
- .borderEffect {
- stroke-dashoffset: -600;
- }
- .bg {
- fill: var(--hover-color);
- }
- }
- &:focus,
- &.${buttonUnstyledClasses.focusVisible} {
- outline: none;
- }
- &.${buttonUnstyledClasses.active} {
- & .bg {
- fill: var(--active-color);
- transition: fill 300ms ease-out;
- }
- }
- & foreignObject {
- pointer-events: none;
- & .content {
- font-family: Helvetica, Inter, Arial, sans-serif;
- font-size: 14px;
- font-weight: 200;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--main-color);
- text-transform: uppercase;
- }
- & svg {
- margin: 0 5px;
- }
- }`,
- );
- const SvgButton = React.forwardRef(function SvgButton(props, ref) {
- return (
- <ButtonUnstyled
- {...props}
- component={CustomButtonRoot}
- ref={ref}
- />
- )
- });
- export default function UnstyledButtonCustom({text, onClick, disabled}) {
- return (
- <SvgButton
- disabled={disabled}
- onClick={onClick}
- >
- {text}
- </SvgButton>
- )
- }
|