<body>
	<div class='button' tabIndex="0">
		<div id='wrapper' class='wrapper'>
			<span class='tag-wrapper'>
				<span id='tag' class='icon tag ei-tag' data-icon='ei-tag' data-size='l'></span>
			</span>
			<span id='close' class='close'></span>
		</div>
	</div>
</body>
body {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(45deg, rgb(84,58,183) 0%, rgb(0,172,193) 100%);
	background-repeat: none;
	background-size: 100% 100%;
  color:white;
	width: 100vw;
	height: 100vh;
	padding: 0;
}

@keyframes button-click {
	0% { transform: scale(1) translateY(0); }
	50% { transform: scale(0.95) translateY(2px); }
	100% { transform: scale(1) translateY(0); }
}

.button {
	display: flex;
	background: #eef3f7;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	box-shadow: 0px 15px 35px -5px rgb(50 88 130 / 32%);
	width: 100px;
	max-width: 800px;
	height: 100px;
	margin: auto;
	transform: scale(1) translateY(0);
	transition: transform 250ms ease;
	&:focus {
		animation: button-click 300ms ease 0ms 1;
	}
	&:active {
		animation: none;
	}
}

.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.tag-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(1);
	transition: transform 400ms ease-in-out 300ms;
}

.tag {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4b5054;
	transform: rotate(-90deg);
	transition: transform 200ms ease-in-out 600ms;
	cursor: pointer;
}

.close {
	display: none;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	width: 75px;
	height: 75px;
	transform-origin: center;
	transition: opacity 100ms ease-in-out 300ms, transform 400ms ease-in-out 0ms;
	&::before, &::after {
		content: '';
		position: absolute;
		background: #4b5054;
		width: 6px;
		height: 60px;
		top: 6px;
		border-radius: 4px;
		opacity: 0;
		transform: scale(1) rotate(0);
		transition: opacity 100ms ease-in-out 300ms, top 200ms ease 100ms, height 200ms ease 100ms, transform 400ms ease-in-out 0ms;
	}
}

.wrapper.open .tag-wrapper {
	transform: scaleX(0);
	transition: transform 500ms ease-in-out 200ms;
	.tag {
		transform: rotate(-45deg);
		transition: all 300ms ease-in-out 0ms;
	}
}

.wrapper.open .close {
	display: flex;
	&::before, &::after {
		display: flex;
		height: 50px;
		top: 12px;
		opacity: 1;
		transition: opacity 100ms ease-in-out 500ms, top 200ms ease 400ms, height 200ms ease 400ms, transform 400ms ease-in-out 500ms;
	}
	&::before {
		transform: scale(0.9) rotate(-45deg);
	}
	&::after {
		transform: scale(0.9) rotate(45deg);
	}
}
View Compiled 
jQuery(document).ready(function ($) {
	$('#wrapper').click(function() {
		$(this).toggleClass('open');
	});
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js