zoukankan      html  css  js  c++  java
  • 按钮样式

    第一种:

    .btn
    {
    /* force height to include the border and padding */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; /* dimensions */
    margin: 0;
    height: 2.1em;
    padding: 0 .6em; /* text & cursor */
    font-size: 18px; /* normalize */
    white-space: nowrap;
    cursor: pointer;
    }

    .btn-bg
    {
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #FFDC8A, #FEB02A);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFDC8A), to(#FEB02A));
    background-image: -webkit-linear-gradient(top, #FFDC8A, #FEB02A);
    background-image: -o-linear-gradient(top, #FFDC8A, #FEB02A);
    background-image: linear-gradient(to bottom, #FFDC8A, #FEB02A);
    background-repeat: repeat-x;
    border-color: #FEB02A #FEB02A #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #0A7AC8;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    第二种:

    .btn
    {
    color: #606060;
    border: solid 1px #b7b7b7;
    background: #ECF4FF;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top, #fff, #ededed);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
    }
    .btn:hover
    {
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
    background: -moz-linear-gradient(top, #fff, #dcdcdc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
    }
    .btn:active
    {
    color: #999;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
    background: -moz-linear-gradient(top, #ededed, #fff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
    }

    .size1btn
    {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 18px/100% Arial, Helvetica, sans-serif;
    padding: .5em .8em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    border-radius: .2em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }

  • 相关阅读:
    老贴纪念九(蓝色 白色 绿色(前四天))
    进入6月
    老贴纪念七!(敏感:二十年了,而青春从来没有离开过)
    一个关于inet_ntoa的奇怪问题
    一个通用的Makefile模板
    【记录】find+tar命令组合
    Linux SDIO WIFI驱动的编译
    编译静态库和动态库的Makefile文件
    分解成连续数字的和
    linux nc命令示例
  • 原文地址:https://www.cnblogs.com/yumianhu/p/4679661.html
Copyright © 2011-2022 走看看