<div class="container">
	<button class="button">
		<span>Liquid effect</span>
	</button>
</div>
// Reset
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

// Variables
$buttonSize: '400px';

.container {
	align-items: center;
	background-color: #000;
	display: flex;
	justify-content: center;
	min-height: 100vh;
}

.button {
	background-color: #d0d;
	border: 1px solid #fff;
	box-shadow: inset 0 0 35px rgba(0, 0, 0, .5);
	color: #fff;
	height: calc(#{$buttonSize} / 4);
	overflow: hidden;
	position: relative;
	text-transform: uppercase;
	width: $buttonSize;
	
	// Text
	span {
		font-size: 16px;
		letter-spacing: .5em;
		padding: 0 2em;
		position: relative;
		font-weight: bold;
		text-shadow: 0 2px 2px rgba(0, 0, 0, .5);
		z-index: 2;
	}
	
	&:before,
	&:after {
		content: '';
		height: calc(#{$buttonSize} * 2);
		left: 50%;
		position: absolute;
		top: -85%;
		transform: translate(-50%, -85%);
		transition: top .5s;
		width: calc(#{$buttonSize} * 2);
	}
	
	&:before {
		animation: liquid 8s linear infinite;
		background-color: rgba(0, 0, 0, 1);
		border-radius: 45%;
	}
	
	&:after {
		animation: liquid 10s linear infinite;
		background-color: rgba(0, 0, 0, .5);
		border-radius: 40%;
	}
	
	&:hover {
		&:before,
		&:after { top: -120%; }
	}
}

@keyframes liquid {
	0% { transform: translate(-50%, -85%) rotate(0deg); }
	100% { transform: translate(-50%, -85%) rotate(360deg); }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.