.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.