div+css实现十一种按钮悬浮背景动画效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现十一种按钮悬浮背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"> <style> body { background: #e0e5ec; } h1 { position: relative; text-align: center; font-weight: 700; letter-spacing: 5px; margin-bottom: 20px; } * { padding: 0; margin: 0; font-family: "Cormorant Garamond", serif; box-sizing: border-box; } p { font-family: 'Lato', sans-serif; font-weight: 300; text-align: center; font-size: 18px; color: #676767; position: relative; } .frame { width: 90%; margin: 40px auto; text-align: center; } button { margin: 20px; position: relative ; } .custom-btn { width: 130px; height: 40px; color: #fff; border-radius: 5px; padding: 10px 25px; font-family: 'Lato', sans-serif; font-weight: 500; 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); outline: none; } /* 1 */ .btn-1 { width: 130px; height: 40px; line-height: 42px; padding: 0; border: none; background: rgb(255,27,0); background: linear-gradient(110deg, rgba(0, 255, 255) 0%, rgba(0,0,255) 100%); } .btn-1:hover { color: #5e90e9; background: transparent; box-shadow:none; } .btn-1:before, .btn-1:after{ content:''; position:absolute; top: 0; right:0; height:2px; width:0; background: linear-gradient(320deg, #0000ff 0%, #00bfff 70%, #00ffff 30%); box-shadow: -1px -1px 5px 0px #fff, 7px 7px 20px 0px #0003, 4px 4px 5px 0px #0002; transition:400ms ease all; } .btn-1:after{ right:inherit; top: 40px; left:0; bottom:0; } .btn-1:hover:before, .btn-1:hover:after{ width:100%; transition:800ms ease all; } /* 2 */ .btn-2 { background: rgb(0,172,238); background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); width: 130px; height: 40px; line-height: 42px; padding: 0; border: none; } .btn-2 span { position: relative; display: block; width: 100%; height: 100%; } .btn-2:before, .btn-2:after { position: absolute; content: ""; right: 0; top: 0; background: rgba(2,126,251,1); transition: all 0.3s ease; } .btn-2:before { height: 0%; width: 2px; } .btn-2:after { width: 0%; height: 2px; } .btn-2:hover{ background: transparent; box-shadow: none; } .btn-2:hover:before { height: 100%; } .btn-2:hover:after { width: 100%; } .btn-2 span:hover{ color: rgba(2,126,251,1); } .btn-2 span:before, .btn-2 span:after { position: absolute; content: ""; left: 0; bottom: 0; background: rgba(2,126,251,1); transition: all 0.3s ease; } .btn-2 span:before { width: 2px; height: 0%; } .btn-2 span:after { width: 0%; height: 2px; } .btn-2 span:hover:before { height: 100%; } .btn-2 span:hover:after { width: 100%; } /* 3 */ .btn-3 { background: linear-gradient(0deg, rgba(2, 180, 251) 0%, rgba(2, 180, 251)100%); line-height: 42px; padding: 0; border: none; } .btn-3 span { position: relative; display: block; width: 100%; height: 100%; } .btn-3:before, .btn-3:after { position: absolute; content: ""; right: 0; bottom: 0; background: rgb(2, 180, 251); 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-3:before{ height: 0%; width: 2px; } .btn-3:after { width: 0%; height: 2px; } .btn-3:hover{ color: rgb(2, 180, 251); background: transparent; } .btn-3:hover:before { height: 100%; } .btn-3:hover:after { width: 100%; } .btn-3 span:before, .btn-3 span:after { position: absolute; content: ""; left: 0; top: 0; background: rgba(2, 180, 251); 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-3 span:before { width: 2px; height: 0%; } .btn-3 span:after { height: 2px; width: 0%; } .btn-3 span:hover:before { height: 100%; } .btn-3 span:hover:after { width: 100%; } /* 4 */ .btn-4 { background: rgb(247,150,192); background: radial-gradient(circle, rgba(0,0,255) 0%, rgba(0,255,255) 100%); line-height: 42px; padding: 0; border: none; } .btn-4 span { position: relative; display: block; width: 100%; height: 100%; } .btn-4:before, .btn-4: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-4:before { right: 0; top: 0; transition: all 500ms ease; } .btn-4:after { left: 0; bottom: 0; transition: all 500ms ease; } .btn-4:hover{ background: transparent; color: #76aef1; box-shadow: none; } .btn-4:hover:before { transition: all 500ms ease; height: 100%; } .btn-4:hover:after { transition: all 500ms ease; height: 100%; } .btn-4 span:before, .btn-4 span:after { position: absolute; content: ""; box-shadow: -1px -1px 20px 0px rgb(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-4 span:before { left: 0; top: 0; width: 0%; height: .5px; transition: all 500ms ease; } .btn-4 span:after { right: 0; bottom: 0; width: 0%; height: .5px; transition: all 500ms ease; } .btn-4 span:hover:before { width: 100%; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0