css实现按钮悬浮错位动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现按钮悬浮错位动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { padding-top:150px; text-align:center; background: url(//repo.bfw.wiki/bfwrepo/image/5e15dae696d11.png); } .free-usage button { background: #f5bc21; color: #fff; } .free-usage button, .subscribe-demo button { padding-left: 32px; font-size: 16px; border-radius: 1px 15px; text-align: left; cursor: pointer; } .free-usage button, .subscribe-demo button { position: relative; top: -1px; height: 50px; width: 150px; -webkit-transition: all .2s ease; transition: all .2s ease; } button { border: none; } .free-usage ,.subscribe-demo{ border: 1px solid rgba(255,255,255,.5); } .free-usage { margin-right: 20px; border-radius: 1px 16px; } .free-usage, .subscribe-demo { display: inline-block; width: 150px; height: 50px; line-height: 50px; margin:10px; } ..free-usage button:hover { background: #ffa80d; color: #fff; } .subscribe-demo:hover button { background: #fff; color: #000; } .free-usage,.subscribe-demo { display: inline-block; wid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0