css鼠标悬浮按钮背景动画效果代码
代码语言:html
所属分类:悬停
代码描述:css鼠标悬浮按钮背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <style> @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); body { font-family: 'Lato', sans-serif; background: #353535; color: #FFF; } .jumbotron h1 { color: #353535; } footer { margin-bottom: 0 !important; margin-top: 80px; } footer p { margin: 0; padding: 0; } span.icon { margin: 0 5px; color: #D64541; } h2 { color: #BDC3C7; text-transform: uppercase; letter-spacing: 1px; } .mrng-60-top { margin-top: 60px; } /* Global Button Styles */ a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size: 14px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; letter-spacing: .08em; border-radius: 0; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a.animated-button:link:after, a.animated-button:visited:after { content: ""; position: absolute; height: 0%; left: 50%; top: 50%; width: 150%; z-index: -1; -webkit-transition: all 0.75s ease 0s; -moz-transition: all 0.75s ease 0s; -o-transition: all 0.75s ease 0s; transition: all 0.75s ease 0s; } a.animated-button:link:hover, a.animated-button:visited:hover { color: #FFF; text-shadow: none; } a.animated-button:link:hover:after, a.animated-button:visited:hover:after { height: 450%; } a.animated-button:link, a.animated-button:visited { position: relative; display: block; margin: 30px auto 0; padding: 14px 15px; color: #fff; font-size: 14px; border-radius: 0; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; overflow: hidden; letter-spacing: .08em; text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } /* Victoria Buttons */ a.animated-button.victoria-one { border: 2px solid #D24D57; } a.animated-button.victoria-one:after { background: #D24D57; -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg); -ms-transform: tr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0