Micro Interaction

index.html

<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>

micro-interaction.markdown

Micro Interaction

A Pen by Andreas Storm on CodePen.

License.

script.js

$(".more").click(function() {
  $(this).toggleClass("toggle");
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.stylus

.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