Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create animated Buttons?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 115
    Comment on it

    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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: