c#怎样用css样式来改变按钮

html-css021

c#怎样用css样式来改变按钮,第1张

css设置按钮样式的方法：定义一个css选择器，然后在按钮标签中使用此选择器即可设置按钮样式。使用:hover伪类选择器可以设置按钮交互时样式。

button样式需要注意的有几点：

1、建议有一个最小宽度，以免在文字很少时使得按钮过于窄，宽高不协调；

2、建议有一个padding，以免内部文本显得过于拥挤；

2、hover时需要有颜色变化，以告诉用户这是一个可交互元素，更为灵动；

3、获得焦点时应与hover时的效果一致，释放焦点时则回到普通效果。

4、获得焦点时的outline建议去掉，否则较为难看。

普通状态样式设置：.btn{

min-width: 60px

padding: 5px 8px

background: #fff

color: #4daff9

border: 1px solid #4daff9

}

交互状态(hover、focus)样式设置：.btn:hover{

color: #fff

background: #0a90f5

}

.btn:focus{

color: #fff

background: #0a90f5

outline: none

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .changeColor2Pink{

            background-color: pink

        }

        .resetBtn1Color{

            background: none

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var btn1=document.getElementById("btn1")

            var btn2= document.getElementById("btn2")

            btn1.onclick = function () {

                btn1.className="changeColor2Pink"

            }

            btn2.onclick = function () {

                btn1.className = "resetBtn1Color"

                btn2.className = "changeColor2Pink"

            }

        }

    </script>

</head>

<body>

<button id="btn1">按钮1</button>

<button id="btn2">按钮2</button>

</body>

</html>