<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">

<div class="wrapper">
	<button><a href="#">
			<div class="scale rotate-4">S</div>
			<div class="scale rotate-2">l</div>
			<div class="scale rotate-3">i</div>
			<div class="scale rotate-1">m</div>
			<div class="scale rotate-2">e</div>
		</a></button>
</div>

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	height: 100vh;
	background-color: #9921e8;
	background-image: linear-gradient(315deg, #9921e8 0%, #5f72be 74%);
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper {
	height: 50px;
	width: 165px;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

button {
	height: 100%;
	width: 90%;
	cursor: pointer;
	background-color: #08e1ae;
	background-image: linear-gradient(315deg, #08e1ae 0%, #98de5b 74%);
	border: none;
	border-radius: 50px 50px 30px 30px;
	transition: 1s;
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

button:active {
	border: none;
	outline: none;
}

button a {
	font-family: 'Fredoka One', cursive;
	font-size: 30px;
	text-decoration: none;
	color: rgba(37, 61, 29, 0.7);
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

button:hover {
	border-radius: 100px 100px 20px 20px;
	height: 45px;
	width: 165px;
}

button:hover .scale {
	letter-spacing: 5px;
	font-size: 25px;
	transition: 1s;
}

.rotate-1, .rotate-2, .rotate-3, .rotate-4 {
	transition: 1s;
}

button:hover .rotate-1 {
	transform: rotate(15deg);
}

button:hover .rotate-2 {
	transform: rotate(-15deg);
}

button:hover .rotate-3 {
	transform: rotate(10deg);
}

button:hover .rotate-4 {
	transform: rotate(-25deg);
}

button:active {
	filter: hue-rotate(90deg);
}