Submit button

index.html

<div class="wrap">
    <button type="submit">Submit</button>
    <img src="https://www.dropbox.com/s/qfu4871umzhlcfo/check_arrow_2.svg?dl=1" alt="">
    <svg width="66px" height="66px">
      <circle class="circle_2" stroke-position="outside" stroke-width="3" fill="none" cx="34" cy="33" r="29" stroke="#1ECD97"></circle>
    </svg>
  </div>
  <footer>
    <p>Thanks for checking this pen</p>
    <a href="http://machycek.com">See more</a
  </footer>

script.js

$(document).ready(function () {
  var timer = null;
  var self = $("button");
  var clicked = false;
  $("button").on("click", function () {
    if (clicked === false){
      self.removeClass("filled");
      self.addClass("circle");
      self.html("");
      clicked = true;
      $("svg").css("display", "block");
      $(".circle_2").attr("class", "circle_2 fill_circle");

      timer = setInterval(
        function tick() {
        self.removeClass("circle");
        self.addClass("filled");
        // self.html("b");
        $(".wrap img").css("display", "block");
        $("svg").css("display", "none");
        clearInterval(timer);
      }, 2500);
      }
  });
});

scripts

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

style.css

@import "compass/css3";

@import "compass/css3";
@import "compass/reset";
$height: 60px;
$trs-time: .4s;
body{
  text-align: center;
  font-family: "Lato";
}
.wrap{
  position: relative;
  margin: auto;
  margin-top: 5%;
  width: 191px;
  text-align: center;
  button{
    display: block;
    height: $height;
    padding: 0;
    width: 191px;
    background: none;
    margin: auto;
    border: 2px solid #1ECD97;
    font-size: 18px;
    font-family: "Lato";
    color: #1ECD97;
    cursor: pointer;
    outline: none;
    text-align: center;
    @include box-sizing(border-box);
    @include border-radius($height/2);
    @include transition(background $trs-time, color $trs-time, font-size .05s, width $trs-time, border $trs-time);
    &:hover{
      background: #1ECD97;
      color: white;
    }
  }
  img{
    position: absolute;
    top: 11px;
    display: none;
    left: 191px/2 - 24px;
    @include scale(0.6);
  }
  svg{
    @include transform(rotate(270deg));
    /* @include rotate(270deg); */
    position: absolute;
    top: -2px;
    left: 62px;
    display: none;
    .circle_2{
      stroke-dasharray: 0 200;
    }
    .fill_circle{
      @include animation(fill-stroke 2s .4s linear forwards);
    }
  }
  .circle{
    width: $height;
    border: 3px solid #c3c3c3;
    /* border: none; */
    &:hover{
      background: none;
    }
  }
  .filled{
    background: #1ECD97;
    color: white;
    line-height: $height;
    font-size: 160%;
  }
}
footer{
  p{
    color: #738087;
    margin-top: 100px;
    font-size: 18px;
    line-height: 28px;
  }
}
@include keyframes(fill-stroke){
  0%{
    stroke-dasharray: 0 200;
  }
  20%{
    stroke-dasharray: 20 200;
  }
  40%{
    stroke-dasharray: 30 200;
  }
  50%{
    stroke-dasharray: 90 200;
  }
  70%{
    stroke-dasharray: 120 200;
  }
  90%{
    stroke-dasharray: 140 200;
  }
  100%{
    stroke-dasharray: 182 200;
  }
}

a, p{
  line-height: 1.6em;
}
a{
  color: #738087;
}

styles

<link href="https://www.dropbox.com/s/udfqeb2pkbcv3be/styles.css" rel="stylesheet" />

Submit button.markdown

Submit button

Epic button idea by https://dribbble.com/ColinGarven

Coded by me https://machycek.com

A Pen by Martin Machýček on CodePen.

License.