Skip to content

Instantly share code, notes, and snippets.

Created Jun 12, 2018
What would you like to do?
Micro Interaction
<div class="more">
<svg width="32px" height="32px" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="15"></circle>
<g id="plus">
<path d="M16,11 L16,21"></path>
<path d="M11,16 L21,16"></path>
<a class="credit" href="" target="_blank">dribbble</a>
$(".more").click(function() {
<script src=""></script>
position absolute
top 50%
left 50%
width 32px
height 32px
margin -16px 0 0 -16px
display inline-block
cursor pointer
border-radius 50%
transition background .2s ease
transition-delay .15s
transform rotate(270deg)
stroke-width 2
stroke white
fill none
//2 * Pi * 15 = 94,25
stroke-dasharray 95
//2 * stroke-dasharray
stroke-dashoffset 190
transition all .6s ease
stroke-linecap round
transform-origin 50% 50%
transition all .8s ease
stroke-width 2
stroke white
fill none
stroke-linecap round
stroke-linejoin round
stroke-dasharray 95
stroke-dashoffset 285
transform rotate(45deg)
background rgba(white,.06)
html, body
height 100%
background #644DE6
background-image linear-gradient(90deg,#644DE6,#3D80E7)
position fixed
right 20px
bottom 20px
text-decoration none
font-family Avenir
font-size 14px
font-weight 500
letter-spacing .04em
color white
background rgba(white,.06)
padding 8px 24px
line-height 1.5em
border-radius 5px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment