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

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

  
 /* A semi-transparent text shadow */  
 text-shadow:1px 1px 0 rgba(255,255,255,0.4);   
  
 /* Overriding the default underline styling of the links */  
 text-decoration:none !important;   
 whitewhite-space:nowrap;   
  
 display:inline-block;   
 vertical-align:baselinebaseline;   
 position:relative;   
 cursor:pointer;   
 padding:10px 20px;   
  
 background-repeat:no-repeat;   
  
 /* The following two rules are fallbacks, in case  
    the browser does not support multiple backgrounds. */  
  
 background-position:bottombottom left;   
 background-image:url(‘button_bg.png’);   
  
 /* Multiple backgrounds version. The background images  
    are defined individually in color classes */  
  
 background-position:bottombottom left, top rightright, 0 0, 0 0;   
 background-clip:border-box;   
  
 /* Applying a default border raidus of 8px */  
  
 -moz-border-radius:8px;   
 -webkit-border-radius:8px;   
 border-radius:8px;   
  
 /* A 1px highlight inside of the button */  
  
 -moz-box-shadow:0 0 1px #fff inset;   
 -webkit-box-shadow:0 0 1px #fff inset;   
 box-shadow:0 0 1px #fff inset;   
  
 /* Animating the background positions with CSS3 */  
 /* Currently works only in Safari/Chrome */  
  
 -webkit-transition:background-position 1s;   
 -moz-transition:background-position 1s;   
 transition:background-position 1s;   
}   
  
.button:hover{   
  
 /* The first rule is a fallback, in case the browser  
    does not support multiple backgrounds  
 */