伪类选择器，按钮和连接

伪类选择器，按钮和连接

 <style>
        a {
            color: #333;
            /* 清除文本默认样式 */
            text-decoration: none;
        }

        /* 伪类选择器 link:没有被访问前的链接样式，hove：当鼠标鼠标悬停在某个按钮或者文本时的状态，
        active：被激活时候的状态，visited：激活后的状态 */
        /* hover：可以用于连接也可以用于其他的所有元素 */
        a:hover {
            /* 当鼠标放置在a标签的时候 a标签的文本变成蓝色 */
            color: aqua;
            /* 鼠标放置在a标签的时候的大小 */
            font-size: 30px;
        }

        /* 被激活以后：visited */
        a:visited {
            /* 当鼠标点击激活以后变成红色 */
            /* color: red; */
        }

        /* 当被点击的时候的状态 */
        a:active {
            color: red;
        }

        /* 修改按钮默认样式 */
        .btn {
            background: #404040;
            color: aliceblue;
            /* 清除默认边框 */
            border: none;
            /* 文字大小 */
            font-size: 16px;
            /* 设置内边距 */
            padding: 10px 20px;
            /* 设置圆角 */
            border-radius: 5px;
            /* 给按钮设置小手指 */
            cursor: pointer;
        }

        /* 当鼠标放置在按钮或者标签的时候的样式 */
        .btn:hover {
            background-color: #fff;
            color: aquamarine;
        }
    </style>

  <!-- a连接 -->
    <a href="#" class="btn">链接</a>
    <br>
    <br>
    <br>
    <!-- button按钮 -->
    <button class="btn">按钮</button>