css实现十几种按钮美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现十几种按钮美化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /** * Codespud design system */ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); /* Base Colors */ :root { --base-color: #0f75ae; --app-bg-color: #88d2fc; --app-text-color: #5a5a5a; --container-color: #fafbfc; --shadow-style: 0 4px 8px rgba(15, 117, 174, 0.2), 0 8px 16px rgba(15, 117, 174, 0.2); } html { font-size: 100%; } body { font-family: Montserrat, sans-serif; font-size: 16px; color: #5a5a5a; line-height: 1.75; background-color: var(--app-bg-color); } p { margin-bottom: 1rem; } h1, h2, h3 { margin: 3rem 0 1.38rem; font-weight: 400; line-height: 1.3; } h1 { margin-top: 0; font-size: min(10vw, 2.852rem); } h2 { font-size: min(7vw, 2.441rem); } h3 { font-size: min(6vw, 1.953rem); } code, blockquote { background-color: rgba(136, 210, 252, 0.2); } blockquote { margin: 0 0 0 3px; margin-block-end: 0; margin-block-start: 0; padding: 0.5rem 1rem 0.5rem 2em; border-left: 2px solid #88d2fc; } figure { margin: 0; padding: 1rem 0; margin-block-end: 0; margin-block-start: 0; } figcaption cite { margin: 0; padding-left: 0; padding-right: 0; } .sr-only, .btn.btn-icon-only .btn-label { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } small, .text_small { font-size: 0.8rem; } code { padding: 0 0.6rem 2px; } *:focus-visible, *:focus:not(:focus-visible) { outline: 2px solid #7f7f7f; } .shadow-low, .widget-container { box-shadow: var(--shadow-style); } .container { display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; box-sizing: border-box; } .centered { display: flex; margin: min(10vh, 3rem) auto; } .justify-content-center { display: flex; flex-wrap: wrap; justify-content: center; } .align-items-center { align-items: center; } .item-group * { margin: 0.5rem 0.25rem 0 0; } .item-group *:last-child { margin: 0.5rem 0 0; } .widget { --widget-bg-color: var(--container-color); --widget-text-color: var(--app-text-color); --widget-width: 320px; --widget-height: 200px; display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(var(--widget-width), 1fr)); grid-template-rows: masonry; box-sizing: border-box; font-size: 1rem; min-height: var(--widget-height); width: max(90%, 320px); } .widget-container { display: inline-flex; box-sizing: border-box; width: 100%; height: 100%; font-size: 1rem; padding: 1.5rem; border-radius: 1rem; background-color: var(--widget-bg-color); margin: 1rem 0 0; } /** for presentatin */ .for-presentation.container { margin: 0.6rem 0; } .for-presentation.container button { margin-bottom: 8px; margin-right: 8px; } .main { margin: 0 auto; padding: min(5%, 2.5rem) 0; justify-content: center; width: min(700px, 90%); } .typography { grid-row-end: span 2; -ms-grid-row-span: 2; } /** include https://codepen.io/chrisbautista/pen/ZEryzKx.css */ .btn { --button-color: lighten($colorCanvasInverted, 10%); --button-text-color: var(--app-text-color); box-sizing: border-box; font-family: inherit; padding: 0.5rem 0.7rem; border-radius: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid var(--button-color); background-color: var(--button-color); color: var(--button-text-color); font-size: 1rem; display: inline-flex; justify-content: center; align-items: center; } .btn-primary { --button-color: #0f75ae; --button-text-color: #fafbfc; } .btn-secondary { --button-color: #88d2fc; --button-text-color: #fafbfc; } .btn-group { display: inline-flex; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 1px 0 2px rgba(0, 0, 0, 0.15); border-radius: 0.5rem; margin: 1rem 0; } .btn-group > button, .btn-group > [class*=btn] { justify-content: flex-start; border-radius: 0; margin: 0; box-shadow: none; border: 1px solid #efefef; } .btn-group > button:first-child, .btn-group > [class*=btn]:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .btn-group > button:last-child, .btn-group > [class*=btn]:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .btn-group > button:hover, .btn-group > [class*=btn]:hover { position: relative; top: -1px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); } .btn-group > button:focus, .btn-group > [class*=btn]:focus { outline: 0; box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.2), inset -1px 1px 0 rgba(0, 0, 0, 0.2); } .btn-group .btn + .btn { margin: 0; } .btn:disabled { --button-color: #e5e5e5; --button-text-color: #5a5a5a; color: rgba(90, 90, 90, 0.8); border: 1px solid rgba(218, 218, 218, 0.5); pointer-events: none; } .btn:focus { outline: 2px solid #034e55; } .btn > .icon { font-size: 1em; } .btn > .icon ~ .btn-label { margin-left: 6px; } .btn.btn-icon-only:hover { background-color: rgba(136, 210, 252, 0.2); } .btn.btn-icon-only > .icon { font-size: 1.5rem; } .btn.btn-flat { box-shadow: none; } .btn.btn-icon-right { flex-direction: row-reverse; } .btn.btn-icon-right > .icon ~ .btn-label { margin-left: 0; margin-right: 4px; } a { color: #06a8b8; text-decoration: none; } a:hover { text-decoration: underline; } .main { margin: 0 auto; padding: min(5%, 2.5rem) 0; justify-content: center; width: min(90%, 600px); } </style> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0