简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  css中button按钮的状态有哪些？

css中button按钮的状态有哪些？

藏色散人
藏色散人asal
2018-08-15 15:45:066539semak imbas

本篇文章主要给大家介绍关于css button按钮的多种状态。希望对有需要的朋友有所帮助。

首先给大家举一段button按钮的状态代码示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>button按钮的状态代码不同效果示例</title>
    <style>
        .btn{
            appearance: none;
            background: #026aa7;
            color: #fff;
            font-size: 20px;
            padding: 0.65em 1em;
            border-radius: 4px;
            box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.2);
            margin-right: 1em;
            cursor: pointer;
            border:0;
        }
        .btn1:hover{
            box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);
        }
        .btn1:focus{
            position: relative;
            top: 4px;
            box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.2);
            outline: 0;
        }
        .btn2:hover{
            box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);
        }
        .btn2:active{
            position: relative;
            top: 4px;
            box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.2);
            outline: 0;
        }
        .btn2:focus{
            outline: 0;
        }
    </style>
</head>
<body>
<button class="btn btn1">点击不会弹起</button>
<button class="btn btn2">点击会弹起</button>
</body></html>

以上代码可直接复制粘贴在本地测试，效果如下图：

851d61a6396198536b518ea83cad888.png

综上所述，给大家总结一下关于button按钮的几种状态：

  1. 普通状态

  2.  hover 鼠标悬停状态

  3. active 点击状态

  4. focus 取得焦点状态

注：.btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框

cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

:active 选择器用于选择活动链接。当您在一个链接上点击时，它就会成为活动的（激活的）。

希望本篇关于button状态的不同情况介绍，对有需要的朋友有所帮助。


Atas ialah kandungan terperinci css中button按钮的状态有哪些？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css 指针 选择器
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css鼠标样式可以自定义吗?（多种样式示例）Artikel seterusnya：css怎么实现按钮圆角样式的展示效果?（示例）

Artikel berkaitan

Lihat lagi