Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Jun 12, 2018
Embed
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>
</g>
</svg>
</div>
<a class="credit" href="https://dribbble.com/shots/3124507-Add-Cancel-Micro-Interaction" target="_blank">dribbble</a>
$(".more").click(function() {
$(this).toggleClass("toggle");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
.more
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
svg
transform rotate(270deg)
circle
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
#plus
transform-origin 50% 50%
transition all .8s ease
path
stroke-width 2
stroke white
fill none
stroke-linecap round
stroke-linejoin round
&.toggle
circle
stroke-dasharray 95
stroke-dashoffset 285
#plus
transform rotate(45deg)
&:hover
background rgba(white,.06)
html, body
height 100%
body
background #644DE6
background-image linear-gradient(90deg,#644DE6,#3D80E7)
.credit
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