button updated

src/components/new_ui/info.tsx

@@ -56,13 +56,12 @@ function Info() {
                 />
 
                 <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"
                     justifyContent="center"
                     px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }}
                 >
                     {infoData.map((info) => (
-                        // buttons
                         <Box
                             key={info.id}
                             w={{ base: '42vw', sm: '42vw', md: '18vw', lg: '12vw', xl: '8vw' }}
@@ -70,7 +69,7 @@ function Info() {
                             cursor="pointer"
                             onClick={() => setSelectedInfo(info.id)}
                             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' }}
                             display="flex"
                             alignItems="center"
@@ -83,6 +82,7 @@ function Info() {
                             lineHeight="1.2"
                             transition="all 0.3s ease"
                             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}
                         </Box>