<div>
  <a href="#">submit</a>
  <a class="loading" href="#">loading</a>
  <svg id="button" viewBox="0 0 240 220">
    <rect id="middle" x="20" y="100" width="200" height="60" rx="30"></rect>
    <path id="top" d="
      M 60,100
      L 50,100
      C 33.4357078,100 20,113.427814 20,130
      L 20,130
      C 20,146.568541 33.4331197,160  50,160
      L190,160
      C206.570288,160 220,146.572314 220,130
      L220,100
      C220,-60 180, 80 160,100
      C140,120 100,160 100,160
    "></path>
    <path id="bottom" d="
      M180,160
      L190,160
      C206.564295,160 220,146.572186 220,130
      L220,130
      C220,113.431458 206.56688,100 190,100
      L 50,100
      C33.4297125,100 20,113.435296 20,130
      C20,130 20,120 20,140
      C20,220 180,200 120,140
      C100,120 80,100 80,100
    "></path>
  </svg>
  <a class="feedback" href="#"></a>
</div>


<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
  <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
  <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
    <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
  </svg>    
</a>
@import "nib"

easeInOutSine = cubic-bezier(0.445, 0.050, 0.550, 0.950)
easeOutBack   = cubic-bezier(0.250,-0.250, 0.750, 1.250)

body
html
div
  background #292A38
  margin 0
  padding 0
  position relative
  width 100%
  height 100%
  text-align center

div a
  transition color .5s
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size 20px
  top 100px
  font-weight 100
  display block
  position absolute
  z-index 3
  text-decoration none
  width 200px
  left 50%
  transform translateX(-50%)
  text-align center
  color rgba(#fff, 1)
  height 60px
  line-height 60px
  border-radius 30px
  &.loading
    color rgba(#fff, 0)
  &.feedback
    z-index 1
    &:after
      transition background .2s, transform .2s
      border-radius 30px
      position absolute
      visibility hidden
      width 200px
      height 100%
      top 0
      left 0
      content ''
      background rgba(#fff, .9)
  &:hover
    background rgba(#fff, .1)

#button
  position relative
  z-index 2
  pointer-events none
  width 240px
  height 220px
  cursor pointer
  transform translate3d(0,0,0)

rect
  transition fill .5s easeInOutSine
  fill #3E3F4C

path
  fill none
  stroke-width 4px
  stroke-linecap round
  stroke #1ECD97
  stroke-dashoffset 0px
  &#top
  &#bottom
    transition stroke-dashoffset .5s easeOutBack, stroke-dasharray .5s easeOutBack, stroke .5s easeInOutSine
    stroke-dasharray 295px 1000px

.loading-start
  a
    color rgba(#fff, 0)
    &.loading
      color rgba(#fff, 1)
  a.feedback:after
    visibility visible
    background rgba(#fff, 0)
    transform scale(1.5, 2)
    transform-origin 
  #top
  #bottom
    transition stroke-dashoffset .5s easeOutBack, stroke-dasharray .5s easeOutBack
    stroke-dasharray 10px 1000px

.loading-progress
  #top
  #bottom
    transition stroke-dashoffset 1s linear, stroke-dasharray 1s linear
    stroke-dasharray 10px 1000px
    stroke-dashoffset -150px

.loading-end
  a.loading
    color rgba(#fff, 0)
  #top
  #bottom
    stroke #f5f6f7
  #top
    transition stroke-dashoffset .5s easeOutBack, stroke-dasharray .5s easeOutBack, stroke .5s easeInOutSine
    stroke-dasharray 30px 1000px
    stroke-dashoffset -518px
  #bottom
    transition stroke-dashoffset .5s easeOutBack, stroke-dasharray .5s easeOutBack, stroke .5s easeInOutSine
    stroke-dasharray 10px 1000px
    stroke-dashoffset -490px
  rect
    fill #1ECD97 !important
    
/* dribbble - twitter */
.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
  img {
    display: block;
    height: 28px;
  }
}
.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
  svg {
    width: 32px;
    height: 32px;
    path {    
      fill: #1da1f2;
      stroke: none;
    }
  }
}
View Compiled
$("div").click ->
  if $("div").hasClass "loading-start"
    if $("div").hasClass "loading-end"
      $("div").attr("class", "")
  else
    setTimeout (-> $("div").addClass("loading-start"))   ,    0
    setTimeout (-> $("div").addClass("loading-progress")),  500
    setTimeout (-> $("div").addClass("loading-end"))     , 1500

resize = ->
  $("body").css
    "margin-top": ~~((window.innerHeight - 260) / 2) + "px"
    
$(window).resize resize
resize()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js