.container
	i.fas.fa-plus.plus-icon
	.btn(title='File')
		i.fas.fa-file
	.btn(title='Folder')
		i.fas.fa-folder
	.btn(title='Mail')
		i.fas.fa-envelope
	.btn(title='Message')
		i.fas.fa-comments
View Compiled
$purple: #3700ff

*
	box-sizing: border-box

body
	width: 100vw
	height: 100vh
	overflow: hidden

.container
	position: relative
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)
	display: grid
	grid-template-columns: repeat(2, 20px)
	justify-content: center
	align-items: center
	cursor: pointer
	width: 90px
	height: 90px
	transition: all .3s ease-out

	&:hover
		transform: translate(-50%, -50%) rotate(45deg)
		transform-origin: center

		.btn	
			> i
				opacity: 1
		
			&:first-of-type
				border-radius: 50%
				transform: scale(2) translate(-7px, -7px)
		
				&:hover
					background: darken($purple, 20%)

			&:nth-of-type(2)
				border-radius: 50%
				transform: scale(2) translate(7px, -7px)
			
				&:hover
					background: darken($purple, 20%)

			&:nth-of-type(3)
				border-radius: 50%
				transform: scale(2) translate(-7px, 7px)
			
				&:hover
					background: darken($purple, 20%)

			&:last-of-type
				border-radius: 50%
				transform: scale(2) translate(7px, 7px)
			
				&:hover
					background: darken($purple, 20%)
	
		.plus-icon
			opacity: 0
			transform: translate(-50%, -50%) scale(0)

.btn
	height: 20px
	background: $purple
	transition: all .2s cubic-bezier(.785,.135,.15,.5)
	display: flex
	align-items: center
	justify-content: center

	> i
		color: rgba(255,255,255,.8)
		font-size: 1rem
		transition: all .2s ease
		opacity: 0
		transform: rotate(-45deg) scale(.5)

	&:first-of-type
		border-radius: 2px 0 0 0
		margin-bottom: -26px
	
	&:nth-of-type(2)
		border-radius: 0 2px 0 0
		margin-left: -1px
		margin-bottom: -26px

	&:nth-of-type(3)
		border-radius: 0 0 0 2px
		margin-top: -26px
	
	&:last-of-type
		border-radius: 0 0 2px 0
		margin-left: -1px
		margin-top: -26px

.plus-icon
	position: absolute
	top: 50%
	left: 50%
	color: #fff
	transform: translate(-50%, -50%)
	transition: all .2s ease
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.