按钮也是一门大学问

这几天深深得感觉到自己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-10-06 20:53:38

按钮也是一门大学问的相关文章

三层中的大学问

最近也进展到了三层的学习,看了一些三层的相关的资料, 才逐渐的认识到三层的概念. 当初没看之前,在学习软件工程的时候,就曾设想过一个项目 的流程也应该大致的包括三部分:需求分析.业务逻辑处理.数 据库.而当面对三层的时候,才恍然大悟,这不就是三层的影子 吗?三层到底是何方神圣呢,下面先看一副图片. 大家设想一下,我们平常去饭店吃饭的场景,前脚刚进去, 服务员就笑嘻嘻的来迎接你,把你点的菜肴,交给头大的伙夫, 伙夫通过后勤人员提前准备好的菜,来做出美味的佳肴,最后再 次通过服务员反馈给你. 想一下

照片管理、备份的大学问

原创 托马斯 Thomas看看世界 2016-11-20 以前托马斯旅行回来的照片,都是随手往硬盘里一扔.随着照片数量越来越多.每次寻找.备份照片都要花很大力气,有时还发现辛苦拍摄的照片已经弄丢了. 今天托马斯分享就来谈谈照片管理.备份的大学问. 知识点:层级文件夹.文件夹命名.Bridge|Lightroom管理照片 文章的一开始,托马斯会先提出三种生活中常见的情景和问题.文章的过程中,你会慢慢找到他们的解决方案. 1)除了电脑硬盘外.你有2TB的百度云盘,1TB的移动硬盘,2个8GB的U盘,

【纯干货】标题里的大学问,月薪10000元以上的运营,是这样写宝贝标题的

本期分享嘉宾:宁静 以往大家所熟知的写标题方法有: 1.通过海量工具箱爬取海量关键词数据: 2.根据搜索指数和商品竞争度对关键词进行排序: 3.找出竞争度小,搜素量大的关键词: 4.从上到下,选择跟产品相关的关键词: 5.将选择好的关键词组合标题. 但是,这类标题写法实际上存在很大的弊端,如:关键词之间的加权重关联影响不足,起不到权重推动的作用:词与词之间选择比较分散:标题关键词的延伸性差,词条增加瓶颈较大,难形成后期爆发性:标题逻辑性不强,不容易做一系列运营计划. 今天将由宁静教大家,如何不用

Java大学问——优雅地处理异常

一.前言 你有没有这样的印象,当你想要更新一款 APP 的时候,它的更新日志里总有这么一两句描述: 修复若干 bug 杀了某程序员祭天,并成功解决掉他遗留的 bug 作为一名负责任的程序员,我们当然希望程序不会出现 bug,因为 bug 出现的越多,间接地证明了我们的编程能力越差,至少领导是这么看的. 事实上,领导是不会拿自己的脑袋宣言的:"我们的程序绝不存在任何一个 bug."但当程序出现 bug 的时候,领导会毫不犹豫地选择让程序员背锅. 为了让自己少背锅,我们可以这样做: 在编码

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:制作一个大按钮

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

魔推mpush:消息推送的大学问,别把用户惹毛了!

从开发者和开发商的角度来说,消息推送越来越受到他们的重视.因此,个推.极光.百度云平台.信鸽.魔推mpush等等消息推送类服务平台应运而生,这受到了运营商们的重视.但是,对信息推送服务的调查我们发现,很多运营商只是单纯的将这个渠道视为一种信息下发通道,并未很好的了解.运用这一个有效的提高APP打开率和活跃度的工具. 根据Flurry公布的数据显示,智能手机用户每天平均2个半小时在看手机,而其中86%的时间都在使用各种各样的APP.而Urban Airship过去6个月内5亿次推送的数据统计结果表

JS实现点击按钮实现文字变大变小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

【Linux探索之旅】第一部分第三课:测试并安装Ubuntu

内容简介 1.第一部分第三课:测试并安装Ubuntu 2.第一部分第四课预告:磁盘分区 测试并安装Ubuntu 大家好,经过前两个比较偏理论(是否想起了带着瓜皮帽,手拿折扇的老学究,或者腐儒)的课程,这第三课我们就正式进入实战啦. 可能不少朋友没使用过Linux这个操作系统,那么这一课就是见识一下它的庐山真面目的时候了. 我们这个系列课程所使用的Linux发行版是Ubuntu,因为其使用广泛,技术支持全面,文档完整,还有一个很关键的原因就是Ubuntu的配色偏"土豪金"啊,有木有,就是

如何优雅的设计APP页面?

页面框架设计只是整个产品设计中的一环,不要把眼界局限在这一环,也不要只站需求.只站在交互.只站在视觉上思考问题,从多个角度看问题,你才会学会成长. 产品设计是一个系统工程,单独拧出来其中一个流程来讲,都是割裂的,但在实际中又必须割裂出来,因为只有割裂出每个流程,把每个流程都想通想透,才能组成完整的产品设计的知识体系.那怎么来权衡整体和局部,系统和部件,也是一门大学问. 一.明确页面设计在整个产品设计中的位置 互联网产品设计的流程大致是:产品定位--需求分析--信息架构设计--流程设计--页面框架