css实现21种按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现21种按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto', sans-serif; color: rgb(85,75,85); background-color: rgb(255,255,255); } h1 { padding: 50px 0; font-size: 45px; text-align: center; color: rgb(54, 56, 55); } :active, :hover, :focus { outline: 0!important; outline-offset: 0; } ::before, ::after { position: absolute; content: ""; } .btn-holder { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1000px; margin: 10px auto 35px; } .btn { position: relative; display: inline-block; width: auto; height: auto; background-color: transparent; border: none; cursor: pointer; margin: 0px 25px 15px; min-width: 150px; } .btn span { position: relative; display: inline-block; font-size: 14px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; top: 0; left: 0; width: 100%; padding: 15px 20px; transition: 0.3s; } /*--- btn-1 ---*/ .btn-1::before { background-color: rgb(28, 31, 30); transition: 0.3s ease-out; } .btn-1 span { color: rgb(255,255,255); border: 1px solid rgb(28, 31, 30); transition: 0.2s 0.1s; } .btn-1 span:hover { color: rgb(28, 31, 30); transition: 0.2s 0.1s; } /* 1.hover-filled-slide-down */ .btn.hover-filled-slide-down::before { bottom: 0; left: 0; right: 0; height: 100%; width: 100%; } .btn.hover-filled-slide-down:hover::before { height: 0%; } /* 2.hover-filled-slide-up */ .btn.hover-filled-slide-up::before { top: 0; left: 0; right: 0; height: 100%; width: 100%; } .btn.hover-filled-slide-up:hover::before { height: 0%; } /* 3.hover-filled-slide-left */ .btn.hover-filled-slide-left::before { top: 0; bottom: 0; left: 0; height: 100%; width: 100%; } .btn.hover-filled-slide-left:hover::before { width: 0%; } /* 4. hover-filled-slide-right */ .btn.hover-filled-slide-right::before { top:0; bottom: 0; right: 0; height: 100%; width: 100%; } .btn.hover-filled-slide-right:hover::before { width: 0%; } /* 5. hover-filled-opacity */ .btn.hover-filled-opacity::before { top:0; bottom: 0; right: 0; height: 100%; width: 100%; opacity: 1; } .btn.hover-filled-opacity:hover::before { opacity: 0; } /*--- btn-2 ---*/ .btn-2::before { background-color: rgb(28, 31, 30); transition: 0.3s ease-out; } .btn-2 span { color: rgb(28, 31, 30); border: 1px solid rgb(28, 31, 30); transition: 0.2s; } .btn-2 span:hover { color: rgb(255,255,255); transition: 0.2s 0.1s; } /* 6. hover-slide-down */ .btn.hover-slide-down::before { top: 0; left: 0; right: 0; height: 0%; width: 100%; } .btn.hover-slide-down:hover::before { height:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0