Encase a Component within a Button

Question

Encase a Component within a Button

In my current project using React, I've successfully implemented a feature where a ball follows the cursor with JavaScript. The ball only appears when it hovers over a button element, thanks to this CSS block:

#app button:hover + .ball {
  display: block;
}

.ball {
  display: none;
}

While this functionality is working well, I am now exploring ways to ensure that the ball remains contained within the button itself. Currently, when hovering near the edge of the button, the ball extends beyond its boundaries.

Check out the project codepen here

javascript css

Answer 1

Answer №1

If you enclose the button and the .ball elements within a container div, you can apply the CSS property overflow:hidden to the container:

Inside the render function:

<div className="button-container">
  <button>BUTTON</button>
  <div ref={ballRef} className="ball"></div>
</div>

In the stylesheet:

.button-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

let mouseX = 0
let mouseY = 0
let ballX = 0
let ballY = 0
let speed = 0.2

const Page = () => {
  const ballRef = React.useRef(null)
  const animate = React.useCallback(() => {
    if (ballRef && ballRef.current) {
      let distX = mouseX - ballX
      let distY = mouseY - ballY
      ballX = ballX + distX * speed
      ballY = ballY + distY * speed
      ballRef.current.style.left = ballX + "px"
      ballRef.current.style.top = ballY + "px"
    }
    requestAnimationFrame(animate)
  }, [ballRef, mouseX, mouseY, ballX, ballY])

  React.useEffect(() => {
    const onMouseMove = event => {
      mouseX = event.pageX
      mouseY = event.pageY
    }

    document.addEventListener("mousemove", onMouseMove)

    animate()

    return () => document.removeEventListener("mousemove", onMouseMove)
  }, [])  

 return (
   <> 
     <div className="button-container">
       <button>BUTTON</button>
       <div ref={ballRef} className="ball"></div>
     </div>
     <div class="divs"></div>
     <div class="divs"></div>
   </>
  );
}

ReactDOM.render(<Page/>, document.querySelector('#app'));

#app button:hover + .ball {
  display: block;
}

.button-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.ball {
  display: none;
}

button{
  background-color: green;
  padding: 20px;
}

.ball {
  background-color: red;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: transform 0.4s, border 0.4s;
  border: 2px solid transparent;
  pointer-events: none;
}

.divs{
  background-color: gray;
  padding:20px;
  margin:20px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Answer 2

If you enclose the button and the .ball elements within a container div, you can apply the CSS property overflow:hidden to the container:

Inside the render function:

<div className="button-container">
  <button>BUTTON</button>
  <div ref={ballRef} className="ball"></div>
</div>

In the stylesheet:

.button-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

let mouseX = 0
let mouseY = 0
let ballX = 0
let ballY = 0
let speed = 0.2

const Page = () => {
  const ballRef = React.useRef(null)
  const animate = React.useCallback(() => {
    if (ballRef && ballRef.current) {
      let distX = mouseX - ballX
      let distY = mouseY - ballY
      ballX = ballX + distX * speed
      ballY = ballY + distY * speed
      ballRef.current.style.left = ballX + "px"
      ballRef.current.style.top = ballY + "px"
    }
    requestAnimationFrame(animate)
  }, [ballRef, mouseX, mouseY, ballX, ballY])

  React.useEffect(() => {
    const onMouseMove = event => {
      mouseX = event.pageX
      mouseY = event.pageY
    }

    document.addEventListener("mousemove", onMouseMove)

    animate()

    return () => document.removeEventListener("mousemove", onMouseMove)
  }, [])  

 return (
   <> 
     <div className="button-container">
       <button>BUTTON</button>
       <div ref={ballRef} className="ball"></div>
     </div>
     <div class="divs"></div>
     <div class="divs"></div>
   </>
  );
}

ReactDOM.render(<Page/>, document.querySelector('#app'));

#app button:hover + .ball {
  display: block;
}

.button-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.ball {
  display: none;
}

button{
  background-color: green;
  padding: 20px;
}

.ball {
  background-color: red;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: transform 0.4s, border 0.4s;
  border: 2px solid transparent;
  pointer-events: none;
}

.divs{
  background-color: gray;
  padding:20px;
  margin:20px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Encase a Component within a Button

Answer №1

Similar questions

Navigate through the website by transforming the arrow and clicking the link

Identify the descendant of the `<li>` tag

Browsing through a collection of JSON objects with a user interface

Sharing CSS styles among multiple single-page applications (SPAs) developed using the React

Navigating Through Secondary Navigation with Ease

Ways to implement Formik to output a boolean value?

Issue encountered while rendering HTML using express

Is there a way to utilize JSON data to dynamically fill column names in a JQuery datatable?

Use an external javascript file in AngularJS if permitted

jQuery Soundboard - Pressing a single button will automatically deactivate all other buttons

Sharing dynamic scientific findings through Python publication

Issues with Transition property not affecting Box-Shadow styling

How can I use jQuery to set the color of every other row in a

What steps can be taken to execute a function when a button remains unclicked?

Turn off transparency for the child element if the parent element has transparency

Tips for creating CSS3 animations in Angular triggered by mouse clicks

Mobile Mode Issue with Bootstrap 4 Navbar Example

Running a series of functions consecutively with JQUERY

Another method to verify an input using HTML5 regex and JavaScript

utilizing Typescript object within an array of objects