How do I Change a button's aspect ratio on click? - css

Question

I am using MUI v5 AppBar to create a navigation bar with Tabs. When the Tabs are clicked, I want the background of the clicked Tab to blend with the background of the main page in the following manner:
The problem is the Tabs are rendered as buttons, and will only appear centered in the appBar when clicked. I can adjust the styling when clicked to increase the height but that will increase the height of the whole button and even the bottom section doesn't blend in with the background as desired as shown here:
Is there a way to increase the proportions of the buttons unevenly on the top and bottom to achieve this and how will I get the background of the button to blend seamlessly with the rest of the page without the visible shadow.
Here's a sample of my current code:
<Box
sx={{
textTransform: "none",
flexGrow: 1,
display: { xs: "none", md: "flex" },
}}
>
<Tabs
value={selectedTab}
onChange={handleChange}
TabIndicatorProps={{hidden: true}}
sx={{
"& button": { borderRadius: 1 },
"& button.Mui-selected": {
color: "black",
backgroundColor: "#e5e5e5",
height: 70,
},
}}
>
<Tab value="one" label="Invoice" />
<Tab value="two" label="Students" />
<Tab value="three" label="Reports" />
</Tabs>
</Box>
Any answer to either question is highly appreciated. Thank you.

Answer 1

Try this out:
<Box
sx={{
textTransform: "none",
backgroundColor: "#295fab",
flexGrow: 1,
padding: "0px 5px",
paddingTop: "16px",
display: { xs: "none", md: "flex" }
}}
>
<Tabs
value={value}
onChange={handleChange}
TabIndicatorProps={{ hidden: true }}
sx={{
"& button": {
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
padding: "5px 25px",
paddingTop: "16px"
},
"& button.Mui-selected": {
color: "black",
backgroundColor: "#e5e5e5"
}
}}
>
<Tab value="one" label="Invoices" />
<Tab value="two" label="Students" />
<Tab value="three" label="Reports" />
</Tabs>
</Box>