<button class="button3">Click me</button>
.button3{
	position:relative;
	background-color:lightblue;
	border:none;
	padding:1.2em 1.4em;
	overflow:hidden;
	font-size:19px;
	transition:0.4s;
}
.button3:after{
	content:"";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
	left:0;
	bottom:0;
	opacity:0;
	transition:all 0.8s;
}
.button3:active:after{
	padding:0;
	opacity:1;
	transition:0s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.