十几种按钮悬浮动态效果
代码语言:html
所属分类:悬停
代码描述:十几种按钮悬浮动态效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #e0e5ec; } h1 { position: relative; text-align: center; color: #353535; font-size: 50px; font-family: "Cormorant Garamond", serif; } p { font-family: 'Lato', sans-serif; font-weight: 300; text-align: center; font-size: 18px; color: #676767; } .frame { width: 90%; margin: 40px auto; text-align: center; } button { margin: 20px; } .custom-btn { width: 130px; height: 40px; padding: 10px 25px; border: 2px solid #000; font-family: 'Lato', sans-serif; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; } /* 1 */ .btn-1 { transition: all 0.3s ease; } .btn-1:hover { box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001; } /* 2 */ .btn-2 { } .btn-2:before { height: 0%; width: 2px; } .btn-2:after { position: absolute; content: ""; top: 5px; left: 6px; width: 90%; height: 70%; border: 1px solid #000; opacity: 0; transition: all 0.3s ease; } .btn-2:hover:after { opacity: 1; } /* 3 */ .btn-3 { line-height: 39px; padding: 0; } .btn-3:hover{ background: transparent; color: #000; } .btn-3 span { position: relative; display: block; width: 100%; height: 100%; } .btn-3:before, .btn-3:after { position: absolute; content: ""; left: 0; top: 0; background: #000; transition: all 0.3s ease; } .btn-3:before { height: 0%; width: 2px; } .btn-3:after { width: 0%; height: 2px; } .btn-3:hover:before { height: 100%; } .btn-3:hover:after { width: 100%; } .btn-3 span:before, .btn-3 span:after { position: absolute; content: ""; right: 0; bottom: 0; background: #000; transition: all 0.3s ease; } .btn-3 span:before { width: 2px; height: 0%; } .btn-3 span:after { width: 0%; height: 2px; } .btn-3 span:hover:before { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0