Monday, 11 July 2016

How to make flashing button with CSS3 keyframes Animation

Source Code


 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | How to make flashing button with CSS3 keyframes Animation</title>  
           <style>  
           .wrapper  
           {  
                margin:0 auto;  
                text-align:center;  
                width:600px;  
                padding:30px 0;  
           }  
           .flashing_effect  
           {  
                font-size:16px;  
                font-family:arial;  
                background:#FF0000;  
                padding:12px 15px;  
                color:#fff;  
                border:0;  
                border-radius:5px;  
                animation-name:flashing;  
                animation-duration:1s;  
                animation-timing-function:linear;  
                animation-iteration-count:infinite;  
           }  
           @keyframes flashing{  
                0%{  
                     opacity:1.0;  
                }  
                25%{  
                     opacity:0.6;  
                }  
                50%{  
                     opacity:0.3;  
                }  
                75%{  
                     opacity:0.6;  
                }  
                100%{  
                     opacity:1.0;  
                }  
           }  
           </style>  
      </head>  
      <body>  
           <div class="wrapper">  
                <h3>How to make flashing button with CSS3 keyframes Animation</h3><br />  
                <button class="flashing_effect">Latest Offer</button>            
           </div>  
      </body>  
 </html>  

0 comments:

Post a Comment