魔幻般冒泡背景的CSS3按钮动画

2020-05-05 07:31:03易采站长站整理

            rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),   
      -moz-linear-gradient(#63c7fe, #58bef7);   
  
 background-image: url(‘button_bg.png’), url(‘button_bg.png’),   
      -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,   
           from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),   
      -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));   
}   
  
/* Green Button */  
  
.green.button{   
 color:#345903 !important;   
 border:1px solid #96a37b !important;    
 background-color: #79be1e;   
  
 background-image:url(‘button_bg.png’), url(‘button_bg.png’), -moz-radial-gradient(center bottombottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);   
 background-image:url(‘button_bg.png’), url(‘button_bg.png’), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));   
}   
  
.green.button:hover{   
 background-color:#89d228;   
  
 background-image:url(‘button_bg.png’), url(‘button_bg.png’), -moz-radial-gradient(center bottombottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);   
 background-image:url(‘button_bg.png’), url(‘button_bg.png’), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));   
}   
  
/* Orange Button */  
  
.orange.button{   
 color:#693e0a !important;   
 border:1px solid #bea280 !important;    
 background-color: #e38d27;   
  
 background-image:url(‘button_bg.png’), url(‘button_bg.png’), -moz-radial-gradient(center bottombottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);