1. 程式人生 > >按鈕也是一門大學問

按鈕也是一門大學問

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/

按鈕也是一門大學問