css实现4种按钮悬浮动画背景效果代码
代码语言:html
所属分类:悬停
代码描述:css实现4种按钮悬浮动画背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <style> body{ background: white; } p { font-family: 'Lato', sans-serif; font-weight: 300; text-align: center; font-size: 18px; color: #676767; } .frame { width: 90%; margin: 30px auto; text-align: center; } .custom-btn { width: 170px; margin:20px; height: 55px; color: #fff; border-radius: 5px; padding: 10px 25px; font-family: 'Lato', sans-serif; font-weight: 500; font-size:16px; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); } /* 6 */ .btn-6 { background: rgb(247,150,192); background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%); line-height: 53px; padding: 0; border: none; } .btn-6 span { position: relative; display: block; width: 100%; height: 100%; } .btn-6:before, .btn-6:after { position: absolute; content: ""; height: 0%; width: 1px; box-shadow: -1px -1px 20px 0px rgba(255,255,255,1), -4px -4px 5px 0px rgba(255,255,255,1), 7px 7px 20px 0px rgba(0,0,0,.4), 4px 4px 5px 0px rgba(0,0,0,.3); } .btn-6:before { right: 0; top: 0; transition: all 500ms ease; } .btn-6:after { left: 0; bottom: 0; transition: all 500ms ease; } .btn-6:hover{ background: transparent; color: #76aef1; box-shadow: none; } .btn-6:hover:before { transition: all 500ms ease; height: 100%; } .btn-6:hover:after { transition: all 500ms ease; height: 100%; } .btn-6 span:before, .btn-6 span:after { position: absolute; content: ""; box-shadow: -1px -1px 20px 0px rgba(255,255,255,1), -4px -4px 5px 0px rgba(255,255,255,1), 7px 7px 20px 0px rgba(0,0,0,.4), 4px 4px 5px 0px rgba(0,0,0,.3); } .btn-6 span:before { left: 0; top: 0; width: 0%; height: .5px; transition: all 500ms ease; } .btn-6 span:after { right: 0; bottom: 0; width: 0%; height: .5px; transition: all 500ms ease; } .btn-6 span:hover:before { width: 100%; } .btn-6 span:hover:after { width: 100%; } /* 7 */ .btn-7 { background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%); line-height: 53px; padding: 0; border: none; } .btn-7 span { position: relative; display: block; width: 100%; height: 100%; } .btn-7:before, .btn-7:after { position: absolute; content: ""; right: 0; bottom: 0; background: rgba(251,75,2,1); box-shadow: -7px -7px 20px 0px rgba(255,255,255,.9), -4px -4px 5px 0px rgba(255,255,255,.9), 7px 7px 20px 0px rgba(0,0,0,.2), 4px 4px 5px 0px rgba(0,0,0,.3); transition: all 0.3s ease; } .btn-7:before{ height: 0%; width: 2px; } .btn-7:after { width: 0%; height: 2px; } .btn-7:hover{ color: rgba(251,75,2,1); background: transparent; } .btn-7:hover:before { height: 100%; } .btn-7:hover:after { width: 100%; } .btn-7 span:before, .btn-7 span:after { position: absolute; content: "&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0