Pure按钮

最新推荐文章于 2021-09-08 19:40:50 发布

bzd_111

最新推荐文章于 2021-09-08 19:40:50 发布

阅读量678

点赞数

分类专栏： python Pure 文章标签： pure

本文链接：https://blog.csdn.net/bzd_111/article/details/52629518

版权

python 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

Pure

4 篇文章 0 订阅

订阅专栏

Pure默认按钮样式

class="pure-button"

禁用按钮

class="pure-button pure-button-display"

激活按钮

class="pure-button pure-button-active"

主要按钮

class="pure-button pure-button-primary"感觉主要的区别是颜色变成蓝了

自定义按钮风格

就是自己写css样式，然后再加入到class属性中

添加图标

图标地址
 图标样式
 图标例子
将Font Awesome 的CSS文件导入，然后像下面的方法使用

<button class="pure-button">
    <i class="fa fa-cog"></i>
    Settings
</button>

我的测试代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="./pure-release-0.6.0/pure-min.css">
    <link rel="stylesheet" type="text/css" href="./pure-release-0.6.0/grids-responsive-min.css">
    <link rel="stylesheet" type="text/css" href="./font-awesome-4.6.3/css/font-awesome.min.css">
    <meta name="name" content="content" charset="utf-8">

    <style type="text/css" media="screen">
        .button-xsmall{
            font-size:60%;
        }
        .button-small{
            font-size:70%;
        }
        .button-xbig{
            font-size:90%;
        }
        .button-big{
            font-size:100%;
        }

         .button-success,
            .button-error,
            .button-warning,
            .button-secondary {
                color: white;
                border-radius: 4px;
                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            }

            .button-success {
                background: rgb(28, 184, 65); /* this is a green */
            }

            .button-error {
                background: rgb(202, 60, 60); /* this is a maroon */
            }

            .button-warning {
                background: rgb(223, 117, 20); /* this is an orange */
            }

            .button-secondary {
                background: rgb(66, 184, 221); /* this is a light blue */
            }

    </style>    
</head>
<body>
<!-- <a href="https://www.baidu.com" title=""><button class="pure-button pure-button-primary button-xsmall "><i class="fa fa-shopping-cart  fa-2x"></i>百度</button></a> -->
<button class="pure-button pure-button-primary button-xsmall button-success">超小号</button>
<button class="pure-button button-small pure-button-disabled button-error">小号</button>
<button class="pure-button button-xbig pure-button-active button-warning">大号</button>
<button class="pure-button button-big button-secondary">超大号</button>
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>

<div class="list-group">
  <a class="pure-button" href="#"><i class="fa fa-home " aria-hidden="true"></i>&nbsp; Home</a>
  <a class="pure-button" href="#"><i class="fa fa-book " aria-hidden="true"></i>&nbsp; Library</a>
  <a class="pure-button" href="#"><i class="fa fa-pencil " aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="pure-button
  " href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>
</body>
</html>

（于2016年9月22日，http://blog.csdn.net/bzd_111）

bzd_111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Pure按钮

Pure默认按钮样式禁用按钮激活按钮主要按钮自定义按钮风格添加图标Pure默认按钮样式class="pure-button"禁用按钮class="pure-button pure-button-display"激活按钮class="pure-button pure-button-active"主要按钮class="pure-button pure-button-primary"感觉主要的
复制链接

扫一扫

专栏目录