Post
Ask Question

Simple Animated Button Using CSS

Simple Animated Button Using CSS.

Source Code

  1. <html>  
  2.     <head>  
  3.         <title>Demo Button</title>  
  4.         <style>                 
  5.         .elem{  
  6.             /****** Use any CSS-rules ******/  
  7.             border: 1px solid #f00000;  
  8.             background: #38ACEC;  
  9.             color: #f3f128;  
  10.             padding: 8px 8px 8px 8px;  
  11.       
  12.             -webkit-transition: all 0.2s linear;/* Safari 3.2+, Chrome */  
  13.             -moz-transition: all 0.2s linear;/* Firefox 4-15 */  
  14.             -o-transition: all 0.2s linear;/* Opera 10.5-12.00 */  
  15.             transition: all 0.2s linear;/* Firefox 16+, Opera 12.50+ */  
  16.       
  17.             -moz-border-radius: 20px 0px;/*Firefox*/  
  18.             -webkit-border-radius: 20px 0px;/*Safari, Chrome*/  
  19.             border-radius: 20px 0px;  
  20.         }      
  21.         .elem:hover {  
  22.             border: 1px solid #000000;  
  23.             background: #A74AC7;  
  24.             color: #ffffff;  
  25.             padding: 8px 8px 8px 8px;  
  26.       
  27.             -moz-border-radius: 0px 20px;/*Firefox*/  
  28.             -webkit-border-radius: 0px 20px;/*Safari, Chrome*/  
  29.             border-radius: 0px 20px;  
  30.         }       
  31.         </style>  
  32.     </head>    
  33.     <body>  
  34.         <h1>Demo Button</h1><br><br>  
  35.         <a class="elem" href="#">Sample button</a>  
  36.     </body>  
  37. </html>