<div><center>
			<button>HELLO!!!</button>
			<button class="red">HELLO!!!</button>
			<button class="blue">HELLO!!!</button>
			<button class="green">HELLO!!!</button>
		</center></div>

*{
				margin: 0;
				padding: 0;
			}
			html, body{
				height: 100%;
			}
			body{
				background: #282828;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
			button{
				border: none;
				outline: none;
				padding: 13px 16px;
				font-size: 18px;
				background: #fff;
				color: #000;
				border-radius: 2px;
				box-shadow: 0 0 10px #fff;
				margin: 20px;
				position: relative;
				transform-style: preserve-3d;
				transition: transform 0.5s;
			}
			button:before, button:after{
				content: 'HELLO!!!!';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-radius: 2px;
				background: inherit;
				opacity: 0.8;
				transform-style: preserve-3d;
				transition: transform 0.5s;
			}
			button:after{
				background: inherit;
				opacity: 0.6;
			}
			button:hover{
				transform: skew(20deg) rotateX(20deg) rotateY(20deg) rotateZ(10deg) translateY(-20px);
			}
			button:hover:before{
				transform: perspective(1000px) translateZ(25px);
			}
			button:hover:after{
				transform: perspective(1000px) translateZ(50px);
			}
			button.red{
				background: #F44336;
				box-shadow: 0 0 10px #F44336;
				color: #fff;
			}
			button.blue{
				background: #2196F3;
				box-shadow: 0 0 10px #2196F3;
				color: #fff;
			}
			button.green{
				background: #4CAF50;
				box-shadow: 0 0 10px #4CAF50;
				color: #fff;
			}
			input{
				width: 250px;
			}