jquery+css实现按钮点击操作动画效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css实现按钮点击操作动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> * { box-sizing: border-box; } html { display: table; height: 100%; width:100%; margin: 0; padding: 0; background-color: #282828; } .block{ display: table; height: 100%; width:100%; margin: 0; padding: 0; text-align: center; font-family: 'Roboto', sans-serif; } .block__cell{ padding-left: 200px; padding-top: 200px; display: table-cell; vertical-align: middle; } .btn{ text-decoration: none; line-height: 46px; padding: 0 30px 0 55px; position: relative; text-align: center; display: inline-block; background-color: #319bef; color: #fff; font-weight: 500; border-radius: 23px; font-size: 16px; transition: all 0.5s linear; -o-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s ease; overflow: hidden; } .btn__icon{ width: 24px; height: 24px; background-color: #fff; border: 0px solid #319bef; border-radius: 50%; display: inline-block; top: 11px; position: absolute; left: 20px; } .btn .btn__icon:before{ content: '.........完整代码请登录后点击上方下载按钮下载查看
网友评论0