68 lines
1.5 KiB
JavaScript
68 lines
1.5 KiB
JavaScript
|
|
import { Button } from '@chakra-ui/react'
|
|
import React from 'react'
|
|
|
|
const WebButton = ({title}) => {
|
|
return ( <Button
|
|
position={"relative"}
|
|
backgroundColor={"transparent"}
|
|
cursor={"pointer"}
|
|
transition="0.3s ease-in-out"
|
|
color={"#fff"}
|
|
width={"auto"}
|
|
height={"auto"}
|
|
p={6}
|
|
pt={2}
|
|
pb={2}
|
|
fontFamily={"Poppins"}
|
|
fontWeight={"600"}
|
|
border={"1px solid white"}
|
|
borderRadius={"4px"}
|
|
fontSize={"14px"}
|
|
zIndex={"1"}
|
|
overflow={"hidden"}
|
|
sx={{
|
|
"::before": {
|
|
content: '""',
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "65px",
|
|
height: "65px",
|
|
borderRadius: "50%",
|
|
transition: "0.35s linear",
|
|
zIndex: -1,
|
|
bgGradient:
|
|
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
|
opacity: "0",
|
|
},
|
|
"&:hover::before": {
|
|
width: "100%",
|
|
height: "120%",
|
|
borderRadius: "0px",
|
|
opacity: "1",
|
|
},
|
|
"@media (max-width: 500px)": {
|
|
fontSize: "14px",
|
|
width: "230px",
|
|
height: "44px",
|
|
marginTop: "2rem",
|
|
bgGradient:
|
|
"radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
|
|
color: "#000",
|
|
fontWeight: "600",
|
|
},
|
|
}}
|
|
_hover={{
|
|
color: "#000",
|
|
border: "1px solid white",
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
{title}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
export default WebButton |