JSFiddle - React, Tailwind, and code Playground

by agusesetiyono

HTML

<div class="container">
	<button disabled>The Button</button>
	<div class="slider"></div>
	<div class="frame">Transition</div>
</div>

CSS

body {
		margin: 20px;
		background-color: #fff;
	}

	.container {
		position: relative;
		margin: 0 auto;
		width: 480px;
		height: 140px;
		background-color: #f5f5f5;
		border-radius: 4px;
		border: 1px solid #ddd;
	}

	button {
		position: absolute;
		padding: 10px 20px;
		top: 50px;
		left: 50px;
		border: none;
		border-radius: 4px;
		color: #fff;
		font: 16px sans-serif;
		
		/* set up background gradient and animation */
		background-image: linear-gradient(#36d279, #1d854a);
		background-size: auto 200%;
		background-position: 0 100%;
		transition: background-position 0.5s;
	}
	.container:hover button {
		/* shift background gradient position */
		background-position: 0 0;
		cursor: pointer;
	}

	.slider {
		position: absolute;
		top: 50px;
		right: 50px;
		margin-top: -32px;
		width: 160px;
		height: 72px;
		background-image: linear-gradient(#36d279, #1d854a);
		transition: margin-top .5s;
	}
	.container:hover .slider {
		margin-top: 0px;
	}

	.frame {
		position: absolute;
		top: 50px;
		right: 50px;
		box-sizing: border-box;
		padding: 10px 0;
		border: solid 1px #ccc;
		border-radius: 4px;
		color: #fff;
		font: 16px sans-serif;
		width: 160px;
		text-align: center;
	}