CSS3 Animation Button Clickable

Find by pinterest

by Jens Kühn

HTML

<div>
  <div class="_0 _3i _2m _2f">
    <div style="position: relative;">
      <div class="SaveButton" role="button" tabindex="0">
        <div class="SaveButtonBackground">
          <div class="_0 _3i _2m _2 _2v _6u _75">
            <div class="_0 _3i _2m" style="margin-right: 3px; margin-left: -6px;">
              <svg class="_mg _5d" height="20" width="20" viewBox="0 0 16 16" aria-hidden="true" aria-label="" role="img">
                <title></title>
                <path d="M4.612 0c0 .618.632 1.146 1.241 1.427v4.459C4.82 6.514 4.25 7.803 4.25 9.143h3.152v4.627S7.505 15.727 8 16c.493-.273.598-2.23.598-2.23V9.143h3.152c0-1.34-.569-2.629-1.604-3.257V1.427c.61-.28 1.241-.81 1.241-1.427H4.612z"></path>
              </svg>
            </div>
            <div class="_st _ss _su _sl _5d _sm _sq _nk _nl _nm _nn">Merken</div>
          </div>
        </div>
      </div>
      
        <div style="position: absolute; left: -3.4375px; top: -30px;">
          <div class="_xh _3i _xq _n5 _xj _53" role="button" tabindex="0">
            <div class="_0 _3i _2m _2f _3" style="animation-iteration-count: infinite; outline: none; box-shadow: none; height: 96px; width: 96px;">
              <div class="_w0 _2h _53 _5k"></div>
              <div class="_w2 _2h _53 _5k"></div>
            </div>
          </div>
        </div>
     
    </div>
  </div>
</div>

CSS

._2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

._h,
._i {
  -webkit-box-direction: normal;
}

._2f {
  position: relative;
}

._2m {
  box-sizing: border-box;
}

._6u {
  padding-bottom: 8px;
  padding-top: 8px;
}

._75 {
  padding-left: 12px;
  padding-right: 12px;
}

._nn {
  word-spacing: 0;
}

._nm {
  letter-spacing: -.15px;
}

._nl {
  line-height: 16px;
}

._nk {
  font-size: 14px;
}

._5d {
  color: #fff;
}

._su {
  text-align: left;
}

._st {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

._ss {
  font-family: Helvetica Neue, Helvetica, \\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3, Hiragino Kaku Gothic Pro, \\30E1\30A4\30EA\30AA, Meiryo, "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", arial, sans-serif;
}

._sq {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}

._sm {
  font-style: normal;
}

._sl {
  font-weight: 700;
}

._mg {
  fill: currentColor;
  stroke-width: 0;
  vertical-align: middle;
}

.SaveButton {
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
}

.SaveButtonBackground {
  background-color: #bd081c;
  border-radius: 4px;
}

._n5 {
  cursor: pointer;
}

._53 {
  border-radius: 50%;
}

._3 {
  display: block;
}

._53 {
  border-radius: 50%;
}

._5k {
  background-color: #555;
}

._2h {
  position: absolute;
}

._w0,
._w2 {
  height: 100%;
  width: 100%;
}

._w0 {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: inherit;
  animation-iteration-count: inherit;
  -webkit-animation-name: c;
  animation-name: c;
}

._w2 {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: inherit;
  animation-iteration-count: inherit;
  -webkit-animation-name: d;
  animation-name: d;
}

@keyframes c {
  0% {
    opacity: 0;
   ...