css实现带阴影按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现带阴影按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url(https://fonts.googleapis.com/css?family=Patrick+Hand+SC); * { box-sizing: border-box; } html, body { width: 100%; min-height: 100%; margin: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background: #F0F0D8; font-family: 'Patrick Hand SC', cursive; } html h2, body h2 { /*margin-top: -5rem;*/ text-align: center; color: #41403E; font-size: 3rem; } html section, body section { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; min-height: 100%; margin-bottom: 3rem; } html section button, body section button { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; background: transparent; padding: 1rem 1rem; margin: 0 1rem; -webkit-transition: all .5s ease; transition: all .5s ease; color: #41403E; font-size: 2rem; letter-spacing: 1px; outline: none; box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2); border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; /* Above is shorthand for: border-top-left-radius: 255px 15px; border-top-right-radius: 15px 225px; border-botto.........完整代码请登录后点击上方下载按钮下载查看
网友评论0