Project

General

Profile

Download (1.12 KB)

Front-Feature #154 » ButtonEnotBulging.tsx

Екатерина Захарова, 12/08/2025 07:48 PM

 
'use client'

import React from 'react';
import Button from '@mui/material/Button';
import { SxProps } from '@mui/material';

interface IButtonEnotBulding {
children: React.ReactNode;
sx?: SxProps;
onClick?: () => void;
isDisabled?: boolean;
}

const ButtonEnotBulding: React.FC<IButtonEnotBulding> = ({ children, sx = {}, onClick }) => {
return (
<Button
disableRipple
onClick={onClick}
sx={{
width: 'auto',
borderRadius: '40px',
backgroundImage: 'linear-gradient(to bottom, #C38F87, #AC7F78)',
p:'8px 16px',
color: 'white',
boxShadow: 'inset 0 -3px 8px rgba(0,0,0,0.3), inset 0 3px 8px rgba(255,255,255,0.3)',
'&:active': {
transition: 'opacity 0.2s ease',
boxShadow: 'inset 0 -3px 8px rgba(0,0,0,0.3), inset 0 3px 8px rgba(255,255,255,0.3)',
opacity: 0.7,
},
'&:hover': {
backgroundImage: 'linear-gradient(to bottom, #C38F87, #AC7F78)',
},


...sx,
}}
>
{children}
</Button>
);
};

export default ButtonEnotBulding;
    (1-1/1)