按钮也是一门大学问
Posted 柠檬张先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了按钮也是一门大学问相关的知识，希望对你有一定的参考价值。
这几天深深得感觉到自己CSS能力的不足，以前自己总觉得一心学好JS就可以走遍天下都不怕。
沉下心来看别人CSS代码，确实觉得CSS也是一门精神的学问，丝毫不亚于JS的学问。
从小小的按钮就可以看出学问深浅。
谷歌按钮全是css代码构成的，没有一丁点的图片，从圆角，到高光渐变全是css实现。更难能可贵的是这个按钮不仅宽度自适应，高度也自适应，而且可以与文字，图片混排。
令人叹为观止。
这种纯css按钮好处多多：
1.可与文字连接在一起排版。
2.按钮内文字高宽自适应，不过改变字体大小需要改变外层a标签的font-size。
3.支持hover.
4.开发维护成本低，性能高。
看完谷歌按钮，不禁去网上各处寻觅其他的按钮，于是都放进了demo里。
点击看效果demo
demo如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="./demo.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"> <style> .g_a{ display:inline-block; border-width:1px 0; border-color:#bbbbbb; border-style:solid; vertical-align:middle; } .g_b{ float:left; background:#e3e3e3; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; position:relative; } .g_c{ display:block; line-height:0.6em; background:#f9f9f9; border-bottom:2px solid #eeeeee; } .g_d{ display:block; padding:0.1em 0.6em; margin-top:-0.6em; cursor:pointer; color: #536b82; } .btn-container{ text-align: center; margin-bottom: 25px; } .g_a:hover{border-color:#999999;} .g_a:hover .g_b{border-color:#999999;} .x_a{ display:inline-block; border-top:1px solid #d6d6d6; border-bottom:1px solid #e5e5e5; font-size:12px; } .x_b{ float:left; border-left:1px solid #d6d6d6; border-right:1px solid #c2c2c2; border-bottom:1px solid #c2c2c2; margin:0 -1px; position:relative; } .x_c{ display:inline-block; padding:0.3em 0.6em 0; background:#f4f4f4; border-left:1px solid #ffffff; border-top:1px solid #ffffff; border-bottom:0.2em solid #f0f0f0; line-height:1.1em; cursor:pointer; color:#536b82; } .x_a_p{ display:inline-block; border-top:1px solid #FBD0B2; border-bottom:1px solid #FCE1CE; font-size:12px; } .x_b_p{ float:left; border-left:1px solid #FBD0B2; border-right:1px solid #F9B88C; border-bottom:1px solid #F9B88C; margin:0 -1px; position:relative; } .x_c_p{ display:inline-block; padding:0.3em 0.6em 0; background:#FEF3EB; border-left:1px solid #ffffff; border-top:1px solid #ffffff; border-bottom:0.2em solid #FEEEE3; line-height:1.1em; cursor:pointer; color:#536b82; } .x_a:hover{ border-top-color:#c0c0c0; border-bottom-color:#cecece; } .x_a:hover .x_b{ border-left-color:#c0c0c0; border-right-color:#aeaeae; border-bottom-color:#aeaeae; } .x_a:hover .x_c{ background:#dbdbdb; border-left-color:#e3e2e1; border-top-color:#e5e5e5; border-bottom-color:#d7d7d7; } .x_a_p:hover{ border-top-color:#FFBE91; border-bottom-color:#FFCEAD; } .x_a_p:hover .x_b_p{ border-left-color:#FFBE91; border-right-color:#FFA76B; border-bottom-color:#FFA76B; } .x_a_p:hover .x_c_p{ background:#FFDFC9; border-left-color:#FFE7D7; border-top-color:#FFEBDD; border-bottom-color:#FFDAC1; } .btn-container > a{ vertical-align: middle; } .btn-container > button{ cursor: pointer; } .tc-15-btn{ display: block; line-height: 45px; margin: 0 auto; width: 218px; height: 47px; border: 1px solid #2277da; color: #2277da; padding: 0; font-size: 16px; border-radius: 2px; box-sizing: border-box; min-width: 24px; text-align: center; transition: .2s ease background; background-color: rgba(237,113,31,0); /* background: #0071ce; */ } .tc-15-btn:hover{ background: #0071ce; color: white; text-decoration: none; } .tc-15-btn{ -webkit-tap-highlight-color: transparent; } .tc-15-btn{ text-decoration: none; } </style> </head> <body> <div class="demo-container"> <div class="header"> <i><b>按钮也是一门大学问</b></i> </div> <div class="method-title"> 谷歌按钮 </div> <div class="btn-container"> <a href="#nogo" class="g_a"> <span class="g_b"> <span class="g_c"> </span> <span class="g_d">谷歌按钮</span> </span> </a> </div> <div class="method-title"> 虾米按钮 </div> <div class="btn-container"> <a href="#" class="x_a"> <span class="x_b"> <span class="x_c">投影按钮</span> </span> </a> - 连接按钮的文字 - <a href="#" class="x_a_p"> <span class="x_b_p"> <span class="x_c_p">粉色按钮</span> </span> </a> </div> <div class="method-title"> bootstrap按钮 </div> <div class="btn-container"> <!-- <button class="btn">bootstrap按钮</button> --> <button class="btn btn-default">bootstrap按钮</button> <button type="button" class="btn btn-primary">bootstrap按钮</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">bootstrap按钮</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">bootstrap按钮</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">bootstrap按钮</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">bootstrap按钮</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">bootstrap按钮链接</button> </div> <div class="method-title"> 最原始按钮 </div> <div class="btn-container"> <button type="button">原始按钮</button> </div> <div class="method-title"> 腾讯云按钮 </div> <div class="btn-container"> <a class="tc-15-btn" href="#">腾讯云按钮</a> </div> </div> </body> </html>
效果图如下：
技术参考来源：http://www.zhangxinxu.com/
以上是关于按钮也是一门大学问的主要内容，如果未能解决你的问题，请参考以下文章