Question: [![enter image description here](https://i.stack.imgur.com/EwyHk.png)](https://i.stack.imgur.com/EwyHk.png)

Hello, I'm learning CSS and was wondering how can I implement the styling above. What kind of effect/style is it called?

I've never implemented something like that before so I don't know where to even start.

Answer: 
I have implemented something. Which is very resembles the design you have shared.

```css
.button {
        position: relative;
        padding: 20px 25px;
        background: #0977d0;
        color: #fff;
        border: 0;
        font-size: 14px;
        font-weight: 700;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
      }
      .button:before {
        width: 20px;
        height: 20px;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transition: all 0.4s ease-in-out;
        opacity: 0;
      }
      .button span {
        position: relative;
        z-index: 1;
      }
      .button:hover::before {
        width: 70px;
        height: 70px;
        opacity: 1;
      }
```

```html
<button class="button"><span>Pressed</span></button>
```
Can also be achieved using JS and CSS classes

```
<div class='button'></div>

```

**CSS**

```
.button {
  width: 220px;
  height: 70px;
  background-color:blue;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}

.ripple {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}

```

**JS**

```
function buttonClick() {
  var buttons = document.querySelectorAll('.button')
  Array.prototype.forEach.call(buttons, function(button) {
    button.addEventListener('click', createRipple)
  })
}

function createRipple(element) {
  var circle = document.createElement('div')
  this.appendChild(circle)
  var dimensions = Math.max(this.clientWidth, this.clientHeight)
  circle.style.width = circle.style.height = dimensions + 'px'
  circle.style.left = element.clientX - this.offsetLeft - dimensions / 2 + 'px'
  circle.style.top = element.clientY - this.offsetTop - dimensions / 2 + 'px'
  circle.classList.add('ripple')
  circle.addEventListener('animationend', () => {
    circle.remove()
  })
}

```