css笔记：用css定义一个无边框的按钮

最新推荐文章于 2024-01-26 12:17:52 发布

shanql

最新推荐文章于 2024-01-26 12:17:52 发布

阅读量1.1k

点赞数

分类专栏： Web开发文章标签： css css3 html

本文链接：https://blog.csdn.net/s634772208/article/details/125252967

版权

Web开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0px;
            padding:0px;
            background-color: gray;
        }

        .myButton{
            background-color:rgb(200, 0, 0);
            width:120px;
            height:50px;
            border:none;/*无边框线*/
            color:white;
            font-size:18px;
            cursor:pointer;

            /*相对static定位向左偏移100px，向下偏移100px，方便看而已*/
            position:relative;
            left:100px;
            top:100px;
        }
        .myButton:hover, .myButton:active{
            /*active表示点击时的样式*/
            background-color: rgb(230,0,0);
        }
        .myButton:focus{
            outline:none; /*在border之外的一圈轮廓线*/
        }
    </style>
</head>
<body>
    <button class="myButton">按钮</button>
</body>
</html>