Just diving into the world of CSS for the first time with a front end styling task, so apologies in advance for any errors or misunderstandings!
I have a placeholder button that triggers a Modal (1):
https://i.sstatic.net/1wT9Y.png
When clicked, the button transforms like this when the Modal appears (2):
https://i.sstatic.net/7OIIy.png
You'll notice a border on the button once it's clicked, giving the impression it's being held down. However, if I click anywhere else on the screen while the Modal is open, the button reverts to this state (3):
https://i.sstatic.net/Ascl1.png
In simple terms, this is how the button component is structured:
<button className={`btn position-relative ${className}`} onClick={onClick}>
...
</button>
The component responsible for triggering the Modal contains this snippet of code:
<Button onClick={() => setModal(true)} className={'btn btn-primary mr-2'}>
(info icon)
</Button>
Any ideas on how to maintain the button appearance from (1) to (3), and skip the transition seen in (2)?