I recently created some buttons for my website using React. Initially, everything was working perfectly with the buttons, but suddenly they stopped functioning. Strangely, I didn't make any alterations to the code and I'm puzzled as to why they are no longer working. Below is the button I imported and used in the "About.js" file:
<Button text="Join Our Discord" link="https://discord.gg/Zrk8kXfs" />And here is the code snippet where I defined the button in the "Button.js" file:
import React from "react";
import styled from "styled-components";
const Btn = styled.button`
display: inline-block;
background-color: ${(props) => props.theme.text};
color: ${(props) => props.theme.body};
outline: none;
border: none;
font-size: ${(props) => props.theme.fontsm};
padding: 0.9rem 2.3rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
&:hover {
transform: scale(0.9);
}
&::after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
border: 2px solid ${(props) => props.theme.text};
width: 100%;
height: 100%;
border-radius: 50px;
transition: all 0.2s ease;
}
&:hover::after {
transform: translate(-50%, -50%) scale(1);
padding: 0.3rem;
}
`;
const Button = ({ text, link }) => {
return (
<Btn>
<a href={link} aria-label={text} target="_blank" rel="noreferrer">
{text}
</a>
</Btn>
);
};
export default Button;
I would greatly appreciate any assistance or insights on why the buttons are no longer working.