zoukankan      html  css  js  c++  java

  • css3学习笔记之按钮

    基本按钮样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
        background-color: #4CAF50;
        border: black;/**/
        color: white;/*字体颜色*/
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
    </style>
    </head>
    <body>
     
    <h2>CSS 按钮</h2>
     
    <button>默认按钮</button>
    <a href="#" class="button">链接按钮</a>
    <button class="button">按钮</button>
    <input type="button" class="button" value="输入框按钮">
     
    </body>
    </html>

    按钮颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
     
    .button2 {background-color: #008CBA;} /* Blue */
    .button3 {background-color: #f44336;} /* Red */ 
    .button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
    .button5 {background-color: #555555;} /* Black */
    </style>
    </head>
    <body>
     
    <h2>按钮颜色</h2>
    <p>我们可以使用 background-color 属性来设置按钮颜色:</p>
     
    <button class="button">Green</button>
    <button class="button button2">Blue</button>
    <button class="button button3">Red</button>
    <button class="button button4">Gray</button>
    <button class="button button5">Black</button>
     
    </body>
    </html>
     

    按钮大小

        

    我们可以使用 font-size 属性来设置按钮大小:

    CSS 实例

    .button1 {font-size: 10px;}
    .button2 {font-size: 12px;}
    .button3 {font-size: 16px;}
    .button4 {font-size: 20px;}
    .button5 {font-size: 24px;}
     
     


     

    圆角按钮

        

    我们可以使用 border-radius 属性来设置圆角按钮:

    CSS 实例

    .button1 {border-radius: 2px;}
    .button2 {border-radius: 4px;}
    .button3 {border-radius: 8px;}
    .button4 {border-radius: 12px;}
    .button5 {border-radius: 50%;}

    按钮边框颜色

        

    我们可以使用 border 属性设置按钮边框颜色:

    CSS 实例

    .button1 {
        background-color: white;
        color: black;
        border: 2px solid #4CAF50; /* Green */
    }
    ...

    鼠标悬停按钮

    我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

    提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }
     
    .button1 {
        background-color: white; 
        color: black; 
        border: 2px solid #4CAF50;
    }
     
    .button1:hover {
        background-color: #4CAF50;
        color: white;
    }
     
    .button2 {
        background-color: white; 
        color: black; 
        border: 2px solid #008CBA;
    }
     
    .button2:hover {
        background-color: #008CBA;
        color: white;
    }
     
    .button3 {
        background-color: white; 
        color: black; 
        border: 2px solid #f44336;
    }
     
    .button3:hover {
        background-color: #f44336;
        color: white;
    }
     
    .button4 {
        background-color: white;
        color: black;
        border: 2px solid #e7e7e7;
    }
     
    .button4:hover {background-color: #e7e7e7;}
     
    .button5 {
        background-color: white;
        color: black;
        border: 2px solid #555555;
    }
     
    .button5:hover {
        background-color: #555555;
        color: white;
    }
    </style>
    </head>
    <body>
     
    <h2>鼠标悬停按钮</h2>
    <p>我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。</p>
    <p><strong>提示:</strong> 我们可以使用 <code>transition-duration</code> 属性来设置 "hover" 效果的速度:</p>
     
    <button class="button button1">Green</button>
    <button class="button button2">Blue</button>
    <button class="button button3">Red</button>
    <button class="button button4">Gray</button>
    <button class="button button5">Black</button>
     
    </body>
    </html>

    按钮阴影

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
    }
     
    .button1 {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }
     
    .button2:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    }
    </style>
    </head>
    <body>
     
    <h2>按钮阴影</h2>
    <p>我们可以使用 box-shadow 属性来为按钮添加阴影:</p>
     
    <button class="button button1">阴影按钮</button>
    <button class="button button2">鼠标悬停后出现阴影</button>
     
    </body>
    </html>
     

    禁用按钮

     

    我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果)。

    提示: 我么可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:

    CSS 实例

    .disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    按钮宽度

     

    默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:

    提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。

    CSS 实例

    .button1 { 250px;}
    .button2 { 50%;}
    .button3 { 100%;}
     

    按钮组

    移除外边距并添加 float:left 来设置按钮组:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        float: left;
    }
     
    .button:hover {
        background-color: #3e8e41;
    }
    </style>
    </head>
    <body>
     
    <h2>按钮组</h2>
    <p>移除外边距并添加 float:left 来设置按钮组:</p>
     
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
     
    <p style="clear:both"><br>记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。</p>
     
    </body>
    </html>

    带边框按钮组


    我们可以使用 border 属性来设置带边框的按钮组:

    CSS 实例

    .button {
        float: left;
        border: 1px solid green
    }

    按钮动画

    鼠标移动到按钮上后添加箭头标记:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
      display: inline-block;
      border-radius: 4px;
      background-color: #f4511e;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 28px;
      padding: 20px;
       200px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
     
    .button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
     
    .button span:after {
      content: '»';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
     
    .button:hover span {
      padding-right: 25px;
    }
     
    .button:hover span:after {
      opacity: 1;
      right: 0;
    }
    </style>
    </head>
    <body>
     
    <h2>按钮动画</h2>
     
    <button class="button" style="vertical-align:middle"><span>Hover </span></button>
     
    </body>
    </html>
     
    点击时添加 "波纹" 效果:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
        position: relative;
        background-color: #4CAF50;
        border: none;
        font-size: 28px;
        color: #FFFFFF;
        padding: 20px;
         200px;
        text-align: center;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        text-decoration: none;
        overflow: hidden;
        cursor: pointer;
    }
     
    .button:after {
        content: "";
        background: #90EE90;
        display: block;
        position: absolute;
        padding-top: 300%;
        padding-left: 350%;
        margin-left: -20px!important;
        margin-top: -120%;
        opacity: 0;
        transition: all 0.8s
    }
     
    .button:active:after {
        padding: 0;
        margin: 0;
        opacity: 1;
        transition: 0s
    }
    </style>
    </head>
    <body>
     
    <h2>按钮动画 - 波纹效果</h2>
     
    <button class="button">Click Me</button>
     
    </body>
    </html>
     
    点击时添加 "压下" 效果:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
      display: inline-block;
      padding: 15px 25px;
      font-size: 24px;
      cursor: pointer;
      text-align: center;   
      text-decoration: none;
      outline: none;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 15px;
      box-shadow: 0 9px #999;
    }
     
    .button:hover {background-color: #3e8e41}
     
    .button:active {
      background-color: #3e8e41;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
    </style>
    </head>
    <body>
     
    <h2>按钮动画 - "按压效果"</h2>
     
    <button class="button">Click Me</button>
     
    </body>
    </html>
     
     
     
     
     
     
  • 相关阅读:
    一个简单的knockout.js 和easyui的绑定
    knockoutjs + easyui.treegrid 可编辑的自定义绑定插件
    Knockout自定义绑定my97datepicker
    去除小数后多余的0
    Windows Azure Web Site (15) 取消Azure Web Site默认的IIS ARR
    Azure ARM (1) UI初探
    Azure Redis Cache (3) 创建和使用P级别的Redis Cache
    Windows Azure HandBook (7) 基于Azure Web App的企业官网改造
    Windows Azure Storage (23) 计算Azure VHD实际使用容量
    Windows Azure Virtual Network (11) 创建VNet-to-VNet的连接
  • 原文地址：https://www.cnblogs.com/aiyoubucuoo/p/5437922.html
Copyright © 2011-2022 走看看