文章: 阅读:

CSS Button 按钮

CSSCSS

前言

  • 使用 CSS 来制作按钮。
标签 描述 备注 🔗
<button> </button> 定义一个按钮 🔗
<input /> 定义一个输入控件 🔗
<a> </a> 定义一个超级链接 🔗

1、基本样式

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <button>默认按钮</button>

    <button class="button">CSS 按钮</button>

    <input type="button" class="button" value="输入框按钮" />

    <a href="#" class="button">链接按钮</a>

  • 效果


    链接按钮

2、颜色

  • 可以使用 background-color 属性来设置按钮颜色。
属性 描述 CSS 备注 🔗
background-color 设置元素的背景颜色 1 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <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>
    1
    2
    3
    4
    5
    <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>

  • 效果



3、边框颜色

  • 可以使用 background-color 属性来设置按钮颜色
属性 描述 CSS 备注 🔗
border 简写属性，用于把针对四个边的属性设置在一个声明 1 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <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;
        }
        .button1 {background-color: white; color: black; border: 2px solid #4CAF50;}
        .button2 {background-color: white; color: black; border: 2px solid #008CBA;}
        .button3 {background-color: white; color: black; border: 2px solid #f44336;}
        .button4 {background-color: white; color: black; border: 2px solid #e7e7e7;}
        .button5 {background-color: white; color: black; border: 2px solid #555555;}
    </style>
    1
    2
    3
    4
    5
    <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>

  • 效果



4、大小

  • 可以使用 font-size 属性来设置按钮大小。
属性 描述 CSS 备注 🔗
font-size 指定文本的字体大小 1 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <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;
        }
        .button1 {font-size: 10px;}
        .button2 {font-size: 12px;}
        .button3 {font-size: 16px;}
        .button4 {font-size: 20px;}
        .button5 {font-size: 24px;}
    </style>
    1
    2
    3
    4
    5
    <button class="button button1">10px</button>
    <button class="button button2">12px</button>
    <button class="button button3">16px</button>
    <button class="button button4">20px</button>
    <button class="button button5">24px</button>

  • 效果



5、圆角

  • 可以使用 border-radius 属性来设置圆角按钮。
属性 描述 CSS 备注 🔗
border-radius 所有四个边角 border---radius 属性的缩写 3 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <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;
        }
        .button1 {border-radius: 2px;}
        .button2 {border-radius: 4px;}
        .button3 {border-radius: 8px;}
        .button4 {border-radius: 12px;}
        .button5 {border-radius: 50%;}
    </style>
    1
    2
    3
    4
    5
    <button class="button button1">2px</button>
    <button class="button button2">4px</button>
    <button class="button button3">8px</button>
    <button class="button button4">12px</button>
    <button class="button button5">50%</button>

  • 效果



6、鼠标悬停

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

  • 可以使用 transition-duration 属性来设置 “hover” 效果的速度。

属性 描述 CSS 备注 🔗
:hover 把鼠标放在链接上的状态 1 🔗
transition-duration 定义过渡效果花费的时间。默认是 0 3 🔗

  • 实例

    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
    <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>
    1
    2
    3
    4
    5
    <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>

  • 效果



7、阴影

  • 可以使用 box-shadow 属性来为按钮添加阴影。
属性 描述 CSS 备注 🔗
box-shadow 附加一个或多个下拉框的阴影 3 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <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>
    1
    2
    <button class="button button1">阴影按钮</button>
    <button class="button button2">鼠标悬停后出现阴影</button>

  • 效果



8、禁用

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

  • 可以添加 cursor 属性并设置为 “not-allowed” 来设置一个禁用的图片。

属性 描述 CSS 备注 🔗
opacity 设置一个元素了透明度级别 3 🔗
cursor 定义光标形状 2 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <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;
        }
        .disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
    1
    2
    <button class="button">正常按钮</button>
    <button class="button disabled">禁用按钮</button>

  • 效果



9、宽度

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

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

属性 描述 CSS 备注 🔗
width 设置元素的宽度 1 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <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;
        }
        .button1 {width: 250px;}
        .button2 {width: 50%;}
        .button3 {
            padding-left: 0;
            padding-right: 0;
            width: 100%;
        }
    </style>
    1
    2
    3
    <button class="button button1">250px</button><br />
    <button class="button button2">50%</button><br />
    <button class="button button3">100%</button>

  • 效果





10、按钮组

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

  • 记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。

属性 描述 CSS 备注 🔗
float 指定一个盒子（元素）是否可以浮动 1 🔗
clear 指定不允许元素周围有浮动元素 1 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <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>
    1
    2
    3
    4
    5
    6
    <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>

  • 效果




    记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。


10.1 带边框按钮组

  • 可以使用 border 属性来设置带边框的按钮组。
属性 描述 CSS 备注 🔗
border 简写属性，用于把针对四个边的属性设置在一个声明 1 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
        .button {
            background-color: #4CAF50; /* Green */
       		border: 1px solid green;
            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>
    1
    2
    3
    4
    5
    6
    <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>

  • 效果




    记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。


11、动画

属性 描述 CSS 备注 🔗
transition 简写属性，用于在一个属性中设置四个过渡属性 3 🔗
transition-duration 定义过渡效果花费的时间。默认是 0 3 🔗

11.1 添加箭头标记

  • 鼠标移动到按钮上后添加箭头标记。

  • 实例

    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
    <style>
        .button {
            display: inline-block;
            border-radius: 4px;
            background-color: #f4511e;
            border: none;
            color: #FFFFFF;
            text-align: center;
            vertical-align: middle;
            font-size: 28px;
            padding: 20px;
            width: 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>
    1
    <button class="button"><span>Hover </span></button>

  • 效果



11.2 添加 “波纹” 效果

  • 点击时添加 “波纹” 效果。

  • 实例

    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
    <style>
        .button {
            position: relative;
            background-color: #4CAF50;
            border: none;
           	border-radius: 4px;
            font-size: 28px;
            color: #FFFFFF;
            padding: 20px;
            width: 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>
    1
    <button class="button">Click Me</button>

  • 效果



11.3 添加 “压下” 效果

  • 点击时添加 “压下” 效果。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <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>
    1
    <button class="button">Click Me</button>

  • 效果



如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:17


评论


文章目录
  1. 1. 前言
  2. 2. 1、基本样式
  3. 3. 2、颜色
  4. 4. 3、边框颜色
  5. 5. 4、大小
  6. 6. 5、圆角
  7. 7. 6、鼠标悬停
  8. 8. 7、阴影
  9. 9. 8、禁用
  10. 10. 9、宽度
  11. 11. 10、按钮组
    1. 11.1. 10.1 带边框按钮组
  12. 12. 11、动画
    1. 12.1. 11.1 添加箭头标记
    2. 12.2. 11.2 添加 “波纹” 效果
    3. 12.3. 11.3 添加 “压下” 效果
隐藏目录