Geek Logbook

Tech sea log book

50projectsIn50days – Day 20: Button Ripple

When you click the button a ripple effect apeared on the button and its expands up to the end.

The construction starts with a event listener which is listening the click inside the buttont. When the button is clicked two constants are created. The x and y that works as the point where is clicked. This is possible because the MouseEvent: clientX property

Once we have this value we look for the offset top and offset left. For that we use the offsetTop property:

The HTMLElement.offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent, the closest positioned ancestor element.

HTMLElement: offsetTop property

At the end we only add the proper style:

buttons.forEach(button => {
    button.addEventListener('click', function (e) {
        const x = e.clientX
        const y = e.clientY

        const buttonTop =
        const buttonLeft =

        const xInside = x - buttonLeft
        const yInside = y -buttonTop

        const circle = document.createElement('span')
        circle.classList.add('circle') = yInside + 'px' = xInside + 'px' = this.appendChild(circle)

        setTimeout(() => circle.remove(), 500)

You can see the code in this GitHub Repository: 20.button_ripple and the demo of the project is here: Button Ripple

Leave a Reply

Your email address will not be published. Required fields are marked *.

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>