How to make the button clickable even if the clicker doesn't touch the text in the button?-CodePudding

Basically, I have three buttons as seen in the image below. When I click on the button's actual text, it redirects, but if I click anywhere else inside the button, nothing happens.

 <Button
                variant="outlined"
                size="large"
                color="inherit"
                style={{ marginRight: '1rem' }}
                sx={{
                    ':hover': {
                        opacity: '',
                        borderColor: '#5865f2', // theme.palette.primary.main
                    },
                }}
            >
                <Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio">PortFolio</Link>
            </Button>

My goal is to make it redirect regardless of whether we click inside the button's text or not.

CodePudding user response：

Wrap Your Buttons with < Link > button </ Link >

 <Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio">PortFolio
     <Button
                    variant="outlined"
                    size="large"
                    color="inherit"
                    style={{ marginRight: '1rem' }}
                    sx={{
                        ':hover': {
                            opacity: '',
                            borderColor: '#5865f2', // theme.palette.primary.main
                        },
                    }}
                >
                    
                </Button>
    </Link>

CodePudding user response：

Try this:

     <Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio"><Button
                variant="outlined"
                size="large"
                color="inherit"
                style={{ marginRight: '1rem' }}
                sx={{
                    ':hover': {
                        opacity: '',
                        borderColor: '#5865f2', // theme.palette.primary.main
                    },
                }}
            >
                PortFolio
            </Button>
     </Link>

CodePudding user response：

Zamiast

<button><link></link></button>

sprobuj

<link><button></button></link>

Powinno pomoc