按鈕也是一門大學問
阿新 • • 發佈：2017-12-07
sca this pat action 深深 inf radi eas borde
這幾天深深得感覺到自己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/
按鈕也是一門大學問