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