Hi Reader,

If you want to create an animated button using css3, below is the code example.

Here I am posting some css 3 animated buttons just copy paste and enjoy the code ;) .

button {
          font: inherit;
          color: inherit;
          width: 300px;
          text-transform: uppercase;
          padding: 25px 80px;
            margin: 15px 30px;
          background: #900303;
          overflow: hidden;
          position: relative;
        }
        button:before {
            left: 48%;
        }
        button:active {
            background: #9053a9;
          color: #823aa0;
            top: 2px;
        }
        button > span {
            display: inline-block;
            transition: all 0.5s;
        }
        .icon-forward:before {
          content: "";
          position: absolute;
        }
        .icon-backward:before {
          content: "";
          position: absolute;
        }
        .icon-up:before {
          content: "";
          position: absolute;
        }
        .icon-down:before {
          content: "";
          position: absolute;
        }
        .btn-1:before {
            left: -100%;
          transition: all 0.5s;
        }
        .btn-1:hover:before {
            left: 48%;
        }
        .btn-1:hover > span {
            transform: translateX(300%);
        }
        .btn-2:before {
            top: -100%;
          transition: all 0.5s;
        }
        .btn-2:hover:before {
            top: 30%;
        }
        .btn-2:hover > span {
            transform: translateY(300%);
        }


<div id="wrapper">
      <button class="btn-1 icon-forward"><span>Forward</span></button>
      <button class="btn-1 icon-backward"><span>Backward</span></button>
      <button class="btn-2 icon-up"><span>Upward</span></button>
      <button class="btn-2 icon-down"><span>Downward</span></button>
</div>

Output- Out put generated by using above code