Button on Hover shows boxShadow in ReactJs

September 22, 2022

I want this button to show boxShadow only at Hover. How to do that ?

Button code:

<CButton
        style={{
          float: 'right',
          marginBottom: '15px',
          marginRight: '30px',
          backgroundColor: '#06ac06',
          border: 'none',
          boxShadow: '0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)',
        }}
</CButton>

>Solution :

Pseudo-classes like :hover are not available as inline style. You can implement the hover behavior in JS through a React state + onMouseEnter and onMouseLeave listeners (and then set the box-shadow value based on the state). But as you can see, this approach requires too much boilerplate. I would suggest using CSS-in-JS library like styled-components, utility class like Tailwind, or SCSS.

Try this code: https://codesandbox.io/s/kind-morning-s5sh64?file=/src/App.js

const [isHover, setIsHover] = useState(false)

//...

<CButton
        onMouseEnter={() => setIsHover(true)}
        onMouseLeave={() => setIsHover(false)}
        style={{
          float: 'right',
          marginBottom: '15px',
          marginRight: '30px',
          backgroundColor: '#06ac06',
          border: 'none',
          transition: 'box-shadow .3s', //added for Smouth transition
          boxShadow: `5px 5px 18px -3px rgba(0,0,0,${isHover ? 0.27 : 0})`,
        }}
      >
      </CButton>
```