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>
```
```
<button>Click Me!</button>

```

And Css code

```
<style type="text/css">
    @keyframes gradient {
  0% {
    background: radial-gradient(circle at center, rgba( 255, 125 , 125, 0 ) 0%, #fff 0%, #fff 100%);
  }
  25% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.3 ) 24%, #fff 25%, #fff 100%);
  }
  50% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.5 ) 49%, #fff 50%, #fff 100%);
  }
  75% {
    background: radial-gradient(circle at center, rgba( 255, 125, 125, 0.8 ) 74%, #fff 75%, #fff 100%);
  }
  100% {
    color: #fff;
    background: radial-gradient(circle at center, #f88 99%, #fff 100%, #fff 100%);
  }
}

body {
  background: #68d;
}
button {
  margin-left: calc( 50vw - 175px );
  margin-top: calc( 50vh - 30px );
  width: 350px;
  height: 60px;
  border: none;
  border-radius: 5px;
  background: #fff;
  font-weight: bold;
  font-size: 1.1em;
  color: #666;
  box-shadow: 0 6px 6px #06f;
  outline: none;
}
button:active {
  /* set time duration to your needs */
  animation: gradient 100ms;
  background: #f88;
  color: #fff;
  box-shadow: none;
}
</style>

```