Hello readers , this is a small blog on creating animated buttons using css3. In my example, I have created four buttons using "<ul> <li>" of different color but of  same size. These buttons have width and height 100%, border-radius: 300px, text-shadow: 0 1px 0 rgba(255, 255, 255,.7) and transform: rotate at 360 degree.

Below is the Html code :

<ul>

  <li><a href="#" class="button red">Account<span class="button">Edit your Personal Details</span></a></li>
  <li><a href="#" class="button pink">Signin<span class="button">Signin if you have an account</span></a></li>
  <li><a href="#" class="button blue">Register<span class="button">if you do not have an account </span></a></li>
  <li><a href="#" class="button yellow">Demo<span class="button">Have a look. This product is totally new</span></a></li>
 
</ul>

CSS code is written below:

* {
    margin: 0;
    padding: 0;
      -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

body {
        width: 100%;
        height: 100%;
        font-family: "arial;
        font-size: 13px;
        text-align: center;
        background: #c2f0c2;
    }

    ul {
        margin: 30px auto;
        text-align: center;
    }

    li {
        list-style: none;
        position: relative;
        display: inline-block;
        width: 100px;
        height: 100px;
    }

    @-moz-keyframes rotate {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(-360deg);}
    }

    @-webkit-keyframes rotate {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(-360deg);}
    }

    @-o-keyframes rotate {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(-360deg);}
    }

    @keyframes rotate {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(-360deg);}
    }

    .button {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding-top: 30px;        
        text-decoration: none;        
        text-align: center;
        font-size: 25px;        
        text-shadow: 0 1px 0 rgba(255, 255, 255,.7);
        letter-spacing: -.065em;
        font-family:  sans-serif;        
        -webkit-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
        box-shadow: 2px 2px 7px rgba(0,0,0,.2);
        border-radius: 300px;
        z-index: 1;
        border-width: 4px;
        border-style: solid;
    }

    .button:hover {
        width: 130%;
        height: 130%;
        left: -15%;
        top: -15%;
        font-size: 33px;
        padding-top: 38px;
        -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
        -o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
        -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
        box-shadow: 5px 5px 10px rgba(0,0,0,.3);
        z-index: 2;
        border-size: 10px;
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }

    a.blue {
        background-color: rgba(0, 143, 179,1);
        color: rgba(133,32,28,1);
        border-color: rgba(133,32,28,.2);
    }

    a.blue:hover {
        color: rgba(239,57,50,1);
    }

    a.pink {
        background-color: rgba(153,0,153,1);
        color: rgba(0,63,71,1);
        border-color: rgba(0,63,71,.2);
    }

    a.pink:hover {
        color: rgba(204,0,204,1);
            }

    a.yellow {
        background-color: rgba(252,227,1,1);
        color: rgba(153,38,0,1);
        border-color: rgba(153,38,0,.2);
    }

    a.yellow:hover {
        color: rgba(252,227,1,1);
    }


    a.red {
        background-color: rgba(255, 77, 77,1);
        color: rgba(153,38,0,1);
        border-color: rgba(179, 0, 0,.2);
    }

    a.red:hover {
        color: rgba(255, 77, 77,1);
    }


    .button span.button {
        display: block;
        opacity: 0;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        font-size: 1px;
        border: none;
        padding: 40% 20% 0 20%;
        color: #fff;
    }

    .button span:hover {
        opacity: .85;
        font-size: 16px;
        -webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
        -moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
        -o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
        text-shadow: 0 1px 1px rgba(0,0,0,.5);    
    }

    .pink span {
        background: rgba(204,0,204,.7);        
    }

    .blue span {
        background: rgba(0, 143, 179,.7);        
    }

    .yellow span {
        background: rgba(161,145,0,.7);    

    }

    .red span {
        background: rgba(251,77,77,.7);

    }

Note: This example is running successfully on all latest browsers.