css实现鼠标悬浮按钮背景圈圈动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现鼠标悬浮按钮背景圈圈动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> body{ padding: 100px; } .button { font: 15px Calibri, Arial, sans-serif; /* 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; white-space: nowrap; display: inline-block; vertical-align: baseline; 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: bottom left; background-image: url('button_bg.png'); /* Multiple backgrounds version. The background images are defined individually in color classes */ background-position: bottom left, top right, 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