Simple Animated Button Using CSS

Simple Animated Button Using CSS.

Source Code

<html>
    <head>
        <title>Demo Button</title>
        <style>
        .elem{
            /****** Use any CSS-rules ******/
            border: 1px solid #f00000;
            background: #38ACEC;
            color: #f3f128;
            padding: 8px 8px 8px 8px;

            -webkit-transition: all 0.2s linear;/* Safari 3.2+, Chrome */
            -moz-transition: all 0.2s linear;/* Firefox 4-15 */
            -o-transition: all 0.2s linear;/* Opera 10.5-12.00 */
            transition: all 0.2s linear;/* Firefox 16+, Opera 12.50+ */

            -moz-border-radius: 20px 0px;/*Firefox*/
            -webkit-border-radius: 20px 0px;/*Safari, Chrome*/
            border-radius: 20px 0px;
        }
        .elem:hover {
            border: 1px solid #000000;
            background: #A74AC7;
            color: #ffffff;
            padding: 8px 8px 8px 8px;

            -moz-border-radius: 0px 20px;/*Firefox*/
            -webkit-border-radius: 0px 20px;/*Safari, Chrome*/
            border-radius: 0px 20px;
        }
        </style>
    </head>
    <body>
        <h1>Demo Button</h1><br><br>
        <a class="elem" href="#">Sample button</a>
    </body>
</html>