这几天深深得感觉到自己CSS能力的不足，以前自己总觉得一心学好JS就可以走遍天下都不怕。
沉下心来看别人CSS代码，确实觉得CSS也是一门精神的学问，丝毫不亚于JS的学问。
从小小的按钮就可以看出学问深浅。
谷歌按钮全是css代码构成的，没有一丁点的图片，从圆角，到高光渐变全是css实现。更难能可贵的是这个按钮不仅宽度自适应，高度也自适应，而且可以与文字，图片混排。
令人叹为观止。
这种纯css按钮好处多多：
1.可与文字连接在一起排版。
2.按钮内文字高宽自适应，不过改变字体大小需要改变外层a标签的font-size。
3.支持hover.
4.开发维护成本低，性能高。
看完谷歌按钮，不禁去网上各处寻觅其他的按钮，于是都放进了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/
时间： 2024-08-02 17:36:06