测试代码

<!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>

运行截图

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