button updated

This commit is contained in:
2025-11-01 21:36:55 +08:00
parent e0dfaa5cbe
commit a83686fc72

View File

@@ -56,13 +56,12 @@ function Info() {
/> />
<Flex <Flex
gap={{ base: 2, sm: 2, md: 3, lg: 4, xl: 4 }} gap={{ base: 2, sm: 2, md: 3, lg: 4, xl: 2 }}
flexWrap="wrap" flexWrap="wrap"
justifyContent="center" justifyContent="center"
px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }} px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }}
> >
{infoData.map((info) => ( {infoData.map((info) => (
// buttons
<Box <Box
key={info.id} key={info.id}
w={{ base: '42vw', sm: '42vw', md: '18vw', lg: '12vw', xl: '8vw' }} w={{ base: '42vw', sm: '42vw', md: '18vw', lg: '12vw', xl: '8vw' }}
@@ -70,7 +69,7 @@ function Info() {
cursor="pointer" cursor="pointer"
onClick={() => setSelectedInfo(info.id)} onClick={() => setSelectedInfo(info.id)}
bg={selectedInfo === info.id ? '#3D6741' : '#D4D4D4'} bg={selectedInfo === info.id ? '#3D6741' : '#D4D4D4'}
border="4px solid #99BF35" border={selectedInfo === info.id ? "4px solid #99BF35" : "none"}
borderRadius={{ base: '20px', sm: '20px', md: '18px', lg: '16px', xl: '14px' }} borderRadius={{ base: '20px', sm: '20px', md: '18px', lg: '16px', xl: '14px' }}
display="flex" display="flex"
alignItems="center" alignItems="center"
@@ -83,6 +82,7 @@ function Info() {
lineHeight="1.2" lineHeight="1.2"
transition="all 0.3s ease" transition="all 0.3s ease"
px={2} px={2}
boxShadow="inset 9px 3px 9px rgba(0,0,0,0.3), inset -3px 3px 6px rgba(0,0,0,0.3), inset 3px -3px 6px rgba(0,0,0,0.3), 4px 4px 10px rgba(0,0,0,0.45)"
> >
{info.title} {info.title}
</Box> </Box>