按钮也是一门大学问

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/

以上是关于按钮也是一门大学问的主要内容,如果未能解决你的问题,请参考以下文章

你已经是个成熟的985大学了,请不要在大一教 C 语言!

我想问一下大学专业英文怎么说?

985大学的高材生只会写代码片段,丢人吗?

985大学的高材生只会写代码片段,丢人吗?

985大学的高材生只会写代码片段,丢人吗?

985大学的高材生只会写代码片段,丢人吗?