Button press styling - css

Question

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 1

I have implemented something. Which is very resembles the design you have shared.
.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;
}
<button class="button"><span>Pressed</span></button>

Answer 2

<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>

Answer 3

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()
})
}